@kompasid/lit-web-components 0.5.0 → 0.5.2

package/package.json

@@ -3,7 +3,7 @@
   "description": "Kompas.id reusable web components",
   "license": "MIT",
   "author": "kompas.id",
-  "version": "v0.5.0",
+  "version": "v0.5.2",
   "type": "module",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -32,6 +32,7 @@
     "@custom-elements-manifest/analyzer": "^0.4.17",
     "@open-wc/eslint-config": "^9.2.1",
     "@open-wc/testing": "^3.1.6",
+    "@types/js-cookie": "^3.0.6",
     "@typescript-eslint/eslint-plugin": "^5.48.0",
     "@typescript-eslint/parser": "^5.48.0",
     "@web/dev-server": "^0.1.34",

package/src/components/kompasid-freewall/KompasFreewall.ts

@@ -13,6 +13,10 @@ export class KompasFreewall extends LitElement {
       :host {
         font-family: 'PT Sans', sans-serif;
       }
+
+      .top-shadow {
+        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.16);
+      }
     `,
     TWStyles,
   ]
@@ -96,9 +100,8 @@ export class KompasFreewall extends LitElement {
    * Data Layer
    */
 
-  private sendDataLayer(event: string): void {
+  private prepareImpressionsData(): Record<string, any> {
     const baseData = {
-      event,
       paywall_location: this.paywall_location,
       paywall_subscription_package:
         this.paywall_subscription_package || this.packageData.title,
@@ -115,24 +118,36 @@ export class KompasFreewall extends LitElement {
       metered_wall_balance: this.tracker_metered_wall_balance,
     }
 
-    const data = this.isArticle
-      ? {
-          ...baseData,
-          content_id: this.tracker_content_id,
-          content_title: this.tracker_content_title,
-          content_categories: this.tracker_content_categories,
-          content_type: this.tracker_content_type,
-        }
-      : {
-          ...baseData,
-          page_title: this.tracker_page_title,
-        }
+    if (this.isArticle) {
+      return {
+        ...baseData,
+        content_id: this.tracker_content_id,
+        content_title: this.tracker_content_title,
+        content_categories: this.tracker_content_categories,
+        content_type: this.tracker_content_type,
+      }
+    }
+    return {
+      ...baseData,
+      page_title: this.tracker_page_title,
+    }
+  }
+
+  private sendDataLayer(
+    event: string,
+    includeImpressions: boolean = false
+  ): void {
+    const impressionsData = this.prepareImpressionsData()
+
+    const data = includeImpressions
+      ? { event, impressions: [impressionsData] }
+      : { event, ...impressionsData }
 
     window.dataLayer.push(data)
   }
 
   private sendDataLayerPaywallViewed(): void {
-    if (this.isExpand) this.sendDataLayer('paywall_viewed')
+    if (this.isExpand) this.sendDataLayer('paywall_viewed', true)
   }
 
   private sendDataLayerSubscribeButtonClicked(): void {
@@ -163,6 +178,7 @@ export class KompasFreewall extends LitElement {
   override async connectedCallback() {
     super.connectedCallback()
     await this.updateComplete
+
     this.isExpand = this.expand
 
     const originHost: string = encodeURIComponent(window.location.href)
@@ -177,9 +193,10 @@ export class KompasFreewall extends LitElement {
 
   render() {
     return html`
-      <div class="sticky bottom-0 w-full h-full z-20">
+      <div class="sticky bottom-0 w-full h-full z-20 top-shadow">
         <div
-          class="flex flex-col w-full bg-blue-100 py-4 justify-center md:px-12 lg:px-24"
+          class="flex flex-col w-full bg-blue-100 justify-center ${this
+            .isExpand && 'pb-6 md:pb-7'} md:px-4 lg:px-24"
         >
           <kompasid-freewall-head
             .expand=${this.isExpand}

package/src/components/kompasid-freewall/readme.md

@@ -2,6 +2,9 @@
 
 ## Properties
 
+### Base Properties
+**required for artilce and landing_page type*
+
 | Property                       | Attribute                      | Description                                                                              | Type     | Default |
 | ------------------------------ | ------------------------------ | ---------------------------------------------------------------------------------------- | -------- | ------- |
 | `isLogin`                      | `isLogin`                      | property isLogin untuk menghandle apakah user sudah login atau belum        | `boolean` | `false`     |
@@ -10,22 +13,51 @@
 | `head_copy_expand`             | `head_copy_expand`             | property head_copy_expand to update copy header when expand        | `string` | `""`     |
 | `head_copy_collapse`           | `head_copy_collapse`           | property head_copy_expand to update copy header when collapse        | `string` | `""`     |
 | `paywall_location`             | `paywall_location`             | property paywall_location is the location where user encounter the paywall            | `string`                | `''`        |
-| `paywall_subscription_id`      | `paywall_subscription_id`      | property paywall_subscription_id is the ID of the subscription package viewed by user            | `number`                | `0`         |
-| `paywall_subscription_package` | `paywall_subscription_package` | property paywall_subscription_package is the name of the subscription package viewed by user             | `string`                | `''`        |
-| `paywall_subscription_price`   | `paywall_subscription_price`   | property paywall_subscription_price is the price of the subscription package viewed by user             | `number`                | `0`         |
-| `paywall_position`             | `paywall_position`             | property paywall_position is the position of the subscription package viewed by user             | `number`                | `1`         |
-| `tracker_page_type`            | `tracker_page_type`            | property tracker_page_type is the type of the page             | `string`                | `''`        |
-| `tracker_page_title`           | `tracker_page_title`           | property tracker_page_title is the title of the page             | `string`                | `''`        |
-| `tracker_content_id`           | `tracker_content_id`           | property tracker_content_id is the ID of article (slug)             | `string`                | `''`        |
-| `tracker_content_title`        | `tracker_content_title`        | property content_title is the title of article             | `string`                | `''`        |
-| `tracker_content_categories`   | `tracker_content_categories`   | property tracker_content_categories is the category of the content             | `string`                | `''`        |
-| `tracker_content_type`         | `tracker_content_type`         | property tracker_content_type is to decide whether it's free article or paid article             | `string`                | `''`        |
+| `tracker_page_type`            | `tracker_page_type`            | property tracker_page_type is the type of the page             | `string`                | `''`      
 | `tracker_user_type`            | `tracker_user_type`            | property tracker_user_type is the type of user based on their subscription             | `string`                | `''`        |
 | `tracker_subscription_status`  | `tracker_subscription_status`  | property tracker_subscription_status is the status of their subscription             | `string`                | `''`        |
 | `tracker_page_domain`          | `tracker_page_domain`          | property tracker_page_domain is the page domain             | `string`                | `''`        |
 | `tracker_metered_wall_balance` | `tracker_metered_wall_balance` | property tracker_metered_wall_balance is the balance of their metered wall             | `number`                | `0`         |
 | `tracker_metered_wall_type`    | `tracker_metered_wall_type`    | property tracker_metered_wall_type is the type of metered wall             | `string`                | `''`        |
 
-----------------------------------------------
+### Article Properties
+**required for article type*
+| Property                       | Attribute                      | Description                                                                              | Type     | Default |
+| ------------------------------ | ------------------------------ | ---------------------------------------------------------------------------------------- | -------- | ------- |
+| `tracker_content_id`           | `tracker_content_id`           | property tracker_content_id is the ID of article (slug)             | `string`                | `''`        |
+| `tracker_content_title`        | `tracker_content_title`        | property content_title is the title of article             | `string`                | `''`        |
+| `tracker_content_categories`   | `tracker_content_categories`   | property tracker_content_categories is the category of the content             | `string`                | `''`        |
+| `tracker_content_type`         | `tracker_content_type`         | property tracker_content_type is to decide whether it's free article or paid article             | `string`                | `''`        |
+
+
+### Landing Page Properties
+**required for landing_page type*
+| Property                       | Attribute                      | Description                                                                              | Type     | Default |
+| ------------------------------ | ------------------------------ | ---------------------------------------------------------------------------------------- | -------- | ------- |
+| `tracker_page_title`           | `tracker_page_title`           | property tracker_page_title is the title of the page             | `string`                | `''`        |
+
+### Optional Properties
+**not required*
+| Property                       | Attribute                      | Description                                                                              | Type     | Default |
+| ------------------------------ | ------------------------------ | ---------------------------------------------------------------------------------------- | -------- | ------- |
+| `paywall_subscription_id`      | `paywall_subscription_id`      | property paywall_subscription_id is the ID of the subscription package viewed by user            | `number`                | `0`         |
+| `paywall_subscription_package` | `paywall_subscription_package` | property paywall_subscription_package is the name of the subscription package viewed by user             | `string`                | `''`        |
+| `paywall_subscription_price`   | `paywall_subscription_price`   | property paywall_subscription_price is the price of the subscription package viewed by user             | `number`                | `0`         |
+| `paywall_position`             | `paywall_position`             | property paywall_position is the position of the subscription package viewed by user             | `number`                | `1`         |
+
+## Dependencies
+
+### Depends on
+
+- [kompasid-freewall-head](../kompasid-freewall-head)
+- [kompasid-freewall-body](../kompasid-freewall-body)
+
+### Graph
+```mermaid
+graph TD;
+  kompasid-freewall --> kompasid-freewall-head
+  kompasid-freewall --> kompasid-freewall-body
+  style kompasid-freewall fill:#023B73,stroke:#333,stroke-width:4px
+```
 
 *Terbikin oleh tim front-end kompas.id*

package/src/components/kompasid-freewall-body/KompasFreewallBody.ts

@@ -121,8 +121,8 @@ export class KompasFreewallBody extends LitElement {
           id="subscription-card"
           class="flex justify-between items-center relative z-10 flex-col w-[328px] ${this
             .isLogin
-            ? 'h-[277px] md:w-[580px] md:h-[240px]'
-            : 'h-[223px] md:w-[350px] lg:w-[410px] md:h-[210px]'} py-3 px-[10px] md:p-5 md:pt-3 rounded-[10px] border-2 border-yellow-400 bg-white"
+            ? 'md:w-[580px]'
+            : 'md:w-[350px] lg:w-[410px]'} py-3 px-[10px] md:p-5 md:pt-3 rounded-[10px] border-2 border-yellow-400 bg-white"
         >
           <div
             class="flex w-full flex-col ${this.isLogin
@@ -151,7 +151,7 @@ export class KompasFreewallBody extends LitElement {
         </div>
         <div id="ribbon-container">
           <div
-            class="text-[11px] font-medium font-roboto-condensed flex justify-center items-center"
+            class="text-[11px] font-medium text-grey-600 font-roboto-condensed flex justify-center items-center"
           >
             <span class="-ml-2">Penawaran Terbaik</span>
           </div>
@@ -163,7 +163,7 @@ export class KompasFreewallBody extends LitElement {
   private registerCardComponent() {
     return html`
       <div
-        class="flex flex-col justify-between w-[328px] h-[159px] md:w-[350px] lg:w-[410px] md:h-[210px] py-3 px-[10px] md:p-5 md:pt-3 rounded-[10px] bg-white"
+        class="flex flex-col justify-between md:min-h-[244px] lg:min-h-[220px] w-[328px] md:w-[350px] lg:w-[410px] py-3 px-[10px] md:p-5 md:pt-3 rounded-[10px] bg-white"
       >
         <div>
           <h5
@@ -171,7 +171,9 @@ export class KompasFreewallBody extends LitElement {
           >
             Daftar Akun Gratis
           </h5>
-          <div class="flex items-start lg:items-center mt-1 md:mt-3">
+          <div
+            class="flex items-start lg:items-center mt-3 mb-4 md:mt-4 md:mb-5"
+          >
             <div class="mt-1 lg:mt-0">${faCheck()}</div>
             <h6 class="text-base text-grey-600 ml-1">
               Akses ke 3 artikel berbayar gratis tiap bulan
@@ -180,7 +182,7 @@ export class KompasFreewallBody extends LitElement {
         </div>
         <button
           @click=${() => redirectToRegister('freewall')}
-          class="bg-white border border-blue-600 whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-blue-600 font-bold leading-[18px]"
+          class="bg-white border border-brand-1 whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-brand-1 font-bold leading-[18px]"
         >
           Daftar Gratis
         </button>
@@ -189,7 +191,7 @@ export class KompasFreewallBody extends LitElement {
   }
 
   private descriptionSection() {
-    return html`<div class="flex flex-col space-y-1 mt-1 lg:mt-3">
+    return html`<div class="flex flex-col space-y-1 mt-3 mb-4 md:mt-4 md:mb-5">
       ${this.description.map(
         item =>
           html`
@@ -209,7 +211,7 @@ export class KompasFreewallBody extends LitElement {
   render() {
     return html`
       <div
-        class="w-full h-full flex flex-col md:flex-row pt-6 md:pt-3 relative px-4 md:px-0 py-3 space-y-4 md:space-x-5 md:space-y-0 justify-center items-center"
+        class="w-full h-full flex flex-col md:flex-row pt-[5px] relative space-y-4 md:space-x-5 md:space-y-0 justify-center items-center"
       >
         ${this.subscriptionCardComponent()}
         ${!this.isLogin ? this.registerCardComponent() : nothing}

package/src/components/kompasid-freewall-head/KompasFreewallHead.ts

@@ -61,11 +61,15 @@ export class KompasFreewallHead extends LitElement {
 
   render() {
     return html`
-      <div class="flex flex-col px-4 md:px-0 space-y-4">
+      <div class="flex flex-col px-4 md:px-0 space-y-4 pt-4 pb-5 md:py-2">
         <div class="flex justify-between items-center h-full space-x-3">
-          <div class="hidden md:block"></div>
+          <div
+            class="hidden ${this.expand ? 'md:block' : 'lg:block'} w-9 h-9"
+          ></div>
           <div class="flex items-center md:justify-start space-x-3">
-            <p class="w-[280px] md:w-full">${this.headCopy}</p>
+            <p class="max-w-[280px] md:max-w-full text-grey-600">
+              ${this.headCopy}
+            </p>
             ${!this.expand
               ? html`<button
                   @click=${this.onSubscriptionClick}
@@ -79,6 +83,7 @@ export class KompasFreewallHead extends LitElement {
           <div>
             <button
               @click=${this.toggleExpand}
+              aria-label="Toggle Expand"
               class="h-9 w-9 flex items-center justify-center text-blue-500 rounded bg-blue-200"
             >
               <div class="${!this.expand && 'rotate-180'}">

package/src/components/kompasid-paywall-video/KompasPaywallVideo.ts

@@ -118,7 +118,6 @@ export class KompasPaywallVideo extends LitElement {
   private defaultComponent() {
     return html`
       <div class="flex flex-col items-center space-y-2 md:space-y-4">
-        ${this.sendDataLayeronNonLogin()} ${this.sendDataLayerPaywallViewed()}
         <h5
           class="leading-5 md:leading-6 w-[296px] md:w-[400px] text-white text-center text-base mb-2 md:mb-0 ${!this
             .isLogin &&
@@ -154,9 +153,8 @@ export class KompasPaywallVideo extends LitElement {
    * Data Layer
    */
 
-  private sendDataLayer(event: string): void {
+  private prepareImpressionsData(): Record<string, any> {
     const baseData = {
-      event,
       paywall_location: this.paywall_location,
       paywall_subscription_package:
         this.paywall_subscription_package || this.packageData.title,
@@ -172,22 +170,34 @@ export class KompasPaywallVideo extends LitElement {
       metered_wall_balance: this.tracker_metered_wall_balance,
     }
 
-    const data = this.isArticle
-      ? {
-          ...baseData,
-          page_type: this.tracker_page_type,
-          content_id: this.tracker_content_id,
-          content_title: this.tracker_content_title,
-          content_categories: this.tracker_content_categories,
-          content_type: this.tracker_content_type,
-        }
-      : baseData
+    if (this.isArticle) {
+      return {
+        ...baseData,
+        page_type: this.tracker_page_type,
+        content_id: this.tracker_content_id,
+        content_title: this.tracker_content_title,
+        content_categories: this.tracker_content_categories,
+        content_type: this.tracker_content_type,
+      }
+    }
+    return baseData
+  }
+
+  private sendDataLayer(
+    event: string,
+    includeImpressions: boolean = false
+  ): void {
+    const impressionsData = this.prepareImpressionsData()
+
+    const data = includeImpressions
+      ? { event, impressions: [impressionsData] }
+      : { event, ...impressionsData }
 
     window.dataLayer.push(data)
   }
 
   private sendDataLayerPaywallViewed(): void {
-    this.sendDataLayer('paywall_viewed')
+    this.sendDataLayer('paywall_viewed', true)
   }
 
   private sendDataLayerSubscribeButtonClicked(): void {
@@ -250,6 +260,9 @@ export class KompasPaywallVideo extends LitElement {
 
     const originHost: string = encodeURIComponent(window.location.href)
     this.packageData = { ...this.showPackage, referrer: originHost }
+
+    this.sendDataLayeronNonLogin()
+    this.sendDataLayerPaywallViewed()
   }
 
   /**

package/tailwind/tailwind.css

@@ -656,6 +656,10 @@ video {
   margin-bottom: 0.5rem;
 }
 
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
 .ml-0 {
   margin-left: 0px;
 }
@@ -760,18 +764,6 @@ video {
   height: 2.25rem;
 }
 
-.h-\[159px\] {
-  height: 159px;
-}
-
-.h-\[223px\] {
-  height: 223px;
-}
-
-.h-\[277px\] {
-  height: 277px;
-}
-
 .h-auto {
   height: auto;
 }
@@ -832,10 +824,6 @@ video {
   width: 138px;
 }
 
-.w-\[250px\] {
-  width: 250px;
-}
-
 .w-\[296px\] {
   width: 296px;
 }
@@ -852,14 +840,14 @@ video {
   width: 100%;
 }
 
-.w-\[280px\] {
-  width: 280px;
-}
-
 .max-w-7xl {
   max-width: 80rem;
 }
 
+.max-w-\[280px\] {
+  max-width: 280px;
+}
+
 .max-w-screen-md {
   max-width: 768px;
 }
@@ -1069,9 +1057,9 @@ video {
   border-color: rgb(147 200 253 / var(--tw-border-opacity));
 }
 
-.border-blue-600 {
+.border-brand-1 {
   --tw-border-opacity: 1;
-  border-color: rgb(3 86 168 / var(--tw-border-opacity));
+  border-color: rgb(0 85 154 / var(--tw-border-opacity));
 }
 
 .border-dark-6 {
@@ -1300,6 +1288,10 @@ video {
   padding-bottom: 1rem;
 }
 
+.pb-5 {
+  padding-bottom: 1.25rem;
+}
+
 .pb-6 {
   padding-bottom: 1.5rem;
 }
@@ -1340,10 +1332,18 @@ video {
   padding-top: 2.5rem;
 }
 
+.pt-4 {
+  padding-top: 1rem;
+}
+
 .pt-6 {
   padding-top: 1.5rem;
 }
 
+.pt-\[5px\] {
+  padding-top: 5px;
+}
+
 .text-left {
   text-align: left;
 }
@@ -1519,11 +1519,6 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.text-green-100 {
-  --tw-text-opacity: 1;
-  color: rgb(238 252 210 / var(--tw-text-opacity));
-}
-
 .underline {
   text-decoration-line: underline;
 }
@@ -1555,6 +1550,10 @@ video {
     margin-bottom: 0px;
   }
 
+  .md\:mb-5 {
+    margin-bottom: 1.25rem;
+  }
+
   .md\:ml-1 {
     margin-left: 0.25rem;
   }
@@ -1591,12 +1590,8 @@ video {
     height: 3rem;
   }
 
-  .md\:h-\[210px\] {
-    height: 210px;
-  }
-
-  .md\:h-\[240px\] {
-    height: 240px;
+  .md\:min-h-\[244px\] {
+    min-height: 244px;
   }
 
   .md\:w-3\/5 {
@@ -1635,6 +1630,10 @@ video {
     width: 100%;
   }
 
+  .md\:max-w-full {
+    max-width: 100%;
+  }
+
   .md\:max-w-sm {
     max-width: 24rem;
   }
@@ -1690,16 +1689,16 @@ video {
     padding-right: 0px;
   }
 
-  .md\:px-12 {
-    padding-left: 3rem;
-    padding-right: 3rem;
-  }
-
   .md\:px-20 {
     padding-left: 5rem;
     padding-right: 5rem;
   }
 
+  .md\:px-4 {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
   .md\:px-5 {
     padding-left: 1.25rem;
     padding-right: 1.25rem;
@@ -1710,6 +1709,11 @@ video {
     padding-right: 1.5rem;
   }
 
+  .md\:py-2 {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
+
   .md\:py-6 {
     padding-top: 1.5rem;
     padding-bottom: 1.5rem;
@@ -1719,6 +1723,10 @@ video {
     padding-bottom: 1rem;
   }
 
+  .md\:pb-7 {
+    padding-bottom: 1.75rem;
+  }
+
   .md\:pt-3 {
     padding-top: 0.75rem;
   }
@@ -1794,10 +1802,6 @@ video {
     margin-top: 0.5rem;
   }
 
-  .lg\:mt-3 {
-    margin-top: 0.75rem;
-  }
-
   .lg\:block {
     display: block;
   }
@@ -1810,6 +1814,10 @@ video {
     display: none;
   }
 
+  .lg\:min-h-\[220px\] {
+    min-height: 220px;
+  }
+
   .lg\:w-\[410px\] {
     width: 410px;
   }