From 813dad3cfa1f10cd602f1fe7732d66ebfaaf91b2 Mon Sep 17 00:00:00 2001
From: Billy Surya <billy.surya@kompas.com>
Date: Wed, 23 Aug 2023 17:00:19 +0700
Subject: [PATCH 1/7] feat(kompas-metered-register): generate initial component

---
 .../kompas-metered-register.css               | 30 +++++++++++++++++++
 .../kompas-metered-register.e2e.ts            | 11 +++++++
 .../kompas-metered-register.spec.tsx          | 18 +++++++++++
 .../kompas-metered-register.tsx               | 16 ++++++++++
 4 files changed, 75 insertions(+)
 create mode 100644 src/components/kompas-metered-register/kompas-metered-register.css
 create mode 100644 src/components/kompas-metered-register/kompas-metered-register.e2e.ts
 create mode 100644 src/components/kompas-metered-register/kompas-metered-register.spec.tsx
 create mode 100644 src/components/kompas-metered-register/kompas-metered-register.tsx

diff --git a/src/components/kompas-metered-register/kompas-metered-register.css b/src/components/kompas-metered-register/kompas-metered-register.css
new file mode 100644
index 0000000..57c42fb
--- /dev/null
+++ b/src/components/kompas-metered-register/kompas-metered-register.css
@@ -0,0 +1,30 @@
+.body {
+  position: sticky;
+  top: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.bg--gray {
+  background-color: #f4f4f4;
+  opacity: 1;
+}
+
+.icon {
+  @apply h-3 w-3;
+
+  &.lg {
+    @apply h-6;
+
+    & svg {
+      @apply h-6;
+    }
+  }
+
+  &-brand-1 {
+    @apply text-brand-1;
+    & svg {
+      @apply fill-current;
+    }
+  }
+}
diff --git a/src/components/kompas-metered-register/kompas-metered-register.e2e.ts b/src/components/kompas-metered-register/kompas-metered-register.e2e.ts
new file mode 100644
index 0000000..39898d9
--- /dev/null
+++ b/src/components/kompas-metered-register/kompas-metered-register.e2e.ts
@@ -0,0 +1,11 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('kompas-metered-register', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<kompas-metered-register></kompas-metered-register>');
+
+    const element = await page.find('kompas-metered-register');
+    expect(element).toHaveClass('hydrated');
+  });
+});
diff --git a/src/components/kompas-metered-register/kompas-metered-register.spec.tsx b/src/components/kompas-metered-register/kompas-metered-register.spec.tsx
new file mode 100644
index 0000000..820a0fe
--- /dev/null
+++ b/src/components/kompas-metered-register/kompas-metered-register.spec.tsx
@@ -0,0 +1,18 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { KompasMeteredRegister } from './kompas-metered-register';
+
+describe('kompas-metered-register', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [KompasMeteredRegister],
+      html: `<kompas-metered-register></kompas-metered-register>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <kompas-metered-register>
+        <mock:shadow-root>
+          <slot></slot>
+        </mock:shadow-root>
+      </kompas-metered-register>
+    `);
+  });
+});
diff --git a/src/components/kompas-metered-register/kompas-metered-register.tsx b/src/components/kompas-metered-register/kompas-metered-register.tsx
new file mode 100644
index 0000000..b3f5a5a
--- /dev/null
+++ b/src/components/kompas-metered-register/kompas-metered-register.tsx
@@ -0,0 +1,16 @@
+import { Component, Host, h } from '@stencil/core';
+
+@Component({
+  tag: 'kompas-metered-register',
+  styleUrl: 'kompas-metered-register.css',
+  shadow: true,
+})
+export class KompasMeteredRegister {
+  render() {
+    return (
+      <Host>
+        <slot></slot>
+      </Host>
+    );
+  }
+}

From 1b1985d0310550e0fb0495ac49ad4c1e0e431f0c Mon Sep 17 00:00:00 2001
From: Billy Surya <billy.surya@kompas.com>
Date: Wed, 23 Aug 2023 18:38:06 +0700
Subject: [PATCH 2/7] feat(kompas-metered-register): add template for last
 article

---
 src/components.d.ts                           |  21 ++
 .../kompas-metered-register.tsx               | 100 ++++++-
 src/index.html                                | 249 ++++++++++--------
 tailwind.config.js                            |  29 +-
 4 files changed, 273 insertions(+), 126 deletions(-)

diff --git a/src/components.d.ts b/src/components.d.ts
index fff5671..2fb5416 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -227,6 +227,12 @@ export namespace Components {
          */
         "userInitialName": string;
     }
+    interface KompasMeteredRegister {
+        /**
+          * prop countdownArticle untuk menghandle sudah berapa artikel gratis yang user baca.
+         */
+        "countdownArticle": number;
+    }
     interface KompasPaywall {
         "countdownArticle": number;
         "isLogin": boolean;
@@ -388,6 +394,12 @@ declare global {
         prototype: HTMLKompasHeaderAccountProfileElement;
         new (): HTMLKompasHeaderAccountProfileElement;
     };
+    interface HTMLKompasMeteredRegisterElement extends Components.KompasMeteredRegister, HTMLStencilElement {
+    }
+    var HTMLKompasMeteredRegisterElement: {
+        prototype: HTMLKompasMeteredRegisterElement;
+        new (): HTMLKompasMeteredRegisterElement;
+    };
     interface HTMLKompasPaywallElement extends Components.KompasPaywall, HTMLStencilElement {
     }
     var HTMLKompasPaywallElement: {
@@ -437,6 +449,7 @@ declare global {
         "kompas-header-account-help-center": HTMLKompasHeaderAccountHelpCenterElement;
         "kompas-header-account-menu": HTMLKompasHeaderAccountMenuElement;
         "kompas-header-account-profile": HTMLKompasHeaderAccountProfileElement;
+        "kompas-metered-register": HTMLKompasMeteredRegisterElement;
         "kompas-paywall": HTMLKompasPaywallElement;
         "kompas-paywall-banner-registration": HTMLKompasPaywallBannerRegistrationElement;
         "kompas-paywall-body": HTMLKompasPaywallBodyElement;
@@ -666,6 +679,12 @@ declare namespace LocalJSX {
          */
         "userInitialName"?: string;
     }
+    interface KompasMeteredRegister {
+        /**
+          * prop countdownArticle untuk menghandle sudah berapa artikel gratis yang user baca.
+         */
+        "countdownArticle"?: number;
+    }
     interface KompasPaywall {
         "countdownArticle"?: number;
         "isLogin"?: boolean;
@@ -766,6 +785,7 @@ declare namespace LocalJSX {
         "kompas-header-account-help-center": KompasHeaderAccountHelpCenter;
         "kompas-header-account-menu": KompasHeaderAccountMenu;
         "kompas-header-account-profile": KompasHeaderAccountProfile;
+        "kompas-metered-register": KompasMeteredRegister;
         "kompas-paywall": KompasPaywall;
         "kompas-paywall-banner-registration": KompasPaywallBannerRegistration;
         "kompas-paywall-body": KompasPaywallBody;
@@ -790,6 +810,7 @@ declare module "@stencil/core" {
             "kompas-header-account-help-center": LocalJSX.KompasHeaderAccountHelpCenter & JSXBase.HTMLAttributes<HTMLKompasHeaderAccountHelpCenterElement>;
             "kompas-header-account-menu": LocalJSX.KompasHeaderAccountMenu & JSXBase.HTMLAttributes<HTMLKompasHeaderAccountMenuElement>;
             "kompas-header-account-profile": LocalJSX.KompasHeaderAccountProfile & JSXBase.HTMLAttributes<HTMLKompasHeaderAccountProfileElement>;
+            "kompas-metered-register": LocalJSX.KompasMeteredRegister & JSXBase.HTMLAttributes<HTMLKompasMeteredRegisterElement>;
             "kompas-paywall": LocalJSX.KompasPaywall & JSXBase.HTMLAttributes<HTMLKompasPaywallElement>;
             "kompas-paywall-banner-registration": LocalJSX.KompasPaywallBannerRegistration & JSXBase.HTMLAttributes<HTMLKompasPaywallBannerRegistrationElement>;
             "kompas-paywall-body": LocalJSX.KompasPaywallBody & JSXBase.HTMLAttributes<HTMLKompasPaywallBodyElement>;
diff --git a/src/components/kompas-metered-register/kompas-metered-register.tsx b/src/components/kompas-metered-register/kompas-metered-register.tsx
index b3f5a5a..d2896ce 100644
--- a/src/components/kompas-metered-register/kompas-metered-register.tsx
+++ b/src/components/kompas-metered-register/kompas-metered-register.tsx
@@ -1,4 +1,5 @@
-import { Component, Host, h } from '@stencil/core';
+import { Component, h, State, Prop, Fragment, Host } from '@stencil/core';
+import chevronUp from '../../../assets/fontawesome-free-5.15.3-web/svgs/solid/chevron-up.svg';
 
 @Component({
   tag: 'kompas-metered-register',
@@ -6,10 +7,105 @@ import { Component, Host, h } from '@stencil/core';
   shadow: true,
 })
 export class KompasMeteredRegister {
+  /**
+   * state
+   */
+  /**
+   * state registerUrl untuk memberikan link kemana user akan dialihkan.
+   */
+  @State() registerUrl: string = 'https://account.kompas.cloud/register';
+  @State() isShowBanner: boolean = true;
+  @State() isExpandBanner: boolean = false;
+
+  /**
+   * prop countdownArticle untuk menghandle sudah berapa artikel gratis yang user baca.
+   */
+  @Prop() countdownArticle: number = 0;
+
+  /**
+   * mengelola tampilan pada section metered paywall
+   */
+  private bannerContent(): void {
+    if (!this.isExpandBanner) {
+      return (
+        <p class="text-base md:text-lg font-lora">
+          Ini Adalah <b>Artikel Gratis Terakhir</b> Anda. <b>Daftar Akun untuk Terus Membaca.</b>
+        </p>
+      );
+    } else {
+      return (
+        <Fragment>
+          <div class="flex flex-col-reverse md:flex-row justify-center gap-8">
+            <div class="text-center md:text-left md:w-1/2">
+              <p class="text-lg md:text-2xl font-lora">
+                Anda Sedang Membaca{' '}
+                <b>
+                  Artikel Premium <br />
+                  Gratis Terakhir
+                </b>{' '}
+                dari Kompas.id
+              </p>
+              <p class="text-sm md:text-base my-3">
+                Ayo daftar akun untuk akses ke beragam artikel dan fitur premium. Anda juga mendukung jurnalisme berkualitas dengan mendaftar akun.
+              </p>
+              <div class="md:self-start">
+                <button onClick={this.redirectToRegister} class="bg-green-500 p-2 w-full md:w-auto rounded-md font-bold text-grey-100 px-6 text-sm md:text-base">
+                  Daftar Akun
+                </button>
+              </div>
+            </div>
+            <div class="flex justify-center">
+              <img src="https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/paywall_ilustrasi3-03_1.png" class="h-40 w-40 md:w-full md:h-full">
+                {' '}
+              </img>
+            </div>
+          </div>
+        </Fragment>
+      );
+    }
+  }
+
+  private bannerTemplate = (): void => {
+    return (
+      <Fragment>
+        <div class="text-grey-600 text-sm md:text-lg self-center text-left ml-auto">{this.bannerContent()}</div>
+      </Fragment>
+    );
+  };
+
+  private redirectToRegister = (): void => {
+    window.location.href = this.registerUrl;
+  };
+
+  private triggerExpandBanner = (): void => {
+    this.isExpandBanner = !this.isExpandBanner;
+  };
+
+  componentDidLoad() {
+    const getCountdown = this.countdownArticle;
+    if (!getCountdown) {
+      this.isShowBanner = false;
+      return;
+    }
+  }
+
   render() {
     return (
       <Host>
-        <slot></slot>
+        {this.isShowBanner ? (
+          <div class="sticky bottom-0 w-full h-full">
+            <div class={`w-full bg-blue-100 lg:px-0 bottom-0 ${this.isExpandBanner ? 'p-8' : 'p-4'}`}>
+              <div class="flex max-w-7xl m-auto relative justify-center">
+                <div class="flex flex-col">{this.bannerTemplate()}</div>
+                <div class="absolute right-0 top-0">
+                  <button onClick={this.triggerExpandBanner} class="bg--gray p-2 rounded-md ">
+                    <div class="icon icon-brand-1" innerHTML={chevronUp}></div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        ) : null}
       </Host>
     );
   }
diff --git a/src/index.html b/src/index.html
index 0f26fdb..c21cf55 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,93 +1,119 @@
 <!DOCTYPE html>
 <html dir="ltr" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
+    <title>Babak Baru Polemik Istana Burung Garuda, Tiga Asosiasi Tolak Pengayaan Desain Karya Nyoman Nuarta</title>
+    <meta
+      name="keywords"
+      content="desain, istana, istana negara, bangunan, negara, sayembara, babak baru, polemik, desain istana negara baru, Nyoman Nuarta, fakta tentang Nyoman Nuarta, tolak pengayaan desain, Diana Kusumastuti, Jakarta, istana negara, istana negara"
+    />
+    <meta property="og:title" content="Babak Baru Polemik Istana Burung Garuda, Tiga Asosiasi Tolak Pengayaan Desain Karya Nyoman Nuarta" />
+    <meta property="og:url" content="https://kompaspedia.kompas.id/baca/paparan-topik/kawasan-ekonomi-khusus-pertumbuhan-ekonomi-baru-dengan-daya-saing-tinggi" />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
+      integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
+      crossorigin="anonymous"
+    />
+    <script type="module" src="/build/kompas-web-components.esm.js"></script>
+    <script nomodule src="/build/kompas-web-components.js"></script>
+    <style>
+      body {
+        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+      }
 
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
-  <title>Babak Baru Polemik Istana Burung Garuda, Tiga Asosiasi Tolak Pengayaan Desain Karya Nyoman Nuarta</title>
-  <meta name="keywords"
-    content="desain, istana, istana negara, bangunan, negara, sayembara, babak baru, polemik, desain istana negara baru, Nyoman Nuarta, fakta tentang Nyoman Nuarta, tolak pengayaan desain, Diana Kusumastuti, Jakarta, istana negara, istana negara">
-  <meta property="og:title"
-    content="Babak Baru Polemik Istana Burung Garuda, Tiga Asosiasi Tolak Pengayaan Desain Karya Nyoman Nuarta" />
-  <meta property="og:url"
-    content="https://kompaspedia.kompas.id/baca/paparan-topik/kawasan-ekonomi-khusus-pertumbuhan-ekonomi-baru-dengan-daya-saing-tinggi" />
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
-    integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
-  <script type="module" src="/build/kompas-web-components.esm.js"></script>
-  <script nomodule src="/build/kompas-web-components.js"></script>
-  <style>
-    body {
-      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    }
+      h2 {
+        font-family: 'Times New Roman', Times, serif;
+        font-size: 36px;
+      }
 
-    h2 {
-      font-family: 'Times New Roman', Times, serif;
-      font-size: 36px;
-    }
+      p {
+        margin-bottom: 16px;
+        text-align: left;
+      }
 
-    p {
-      margin-bottom: 16px;
-      text-align: left;
-    }
+      #app {
+        font-family: Avenir, Helvetica, Arial, sans-serif;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        text-align: center;
+        color: #2c3e50;
+        margin-top: 60px;
+      }
+    </style>
+    <!-- Google Tag Manager -->
+    <script>
+      (function (w, d, s, l, i) {
+        w[l] = w[l] || [];
+        w[l].push({
+          'gtm.start': new Date().getTime(),
+          'event': 'gtm.js',
+        });
+        var f = d.getElementsByTagName(s)[0],
+          j = d.createElement(s),
+          dl = l != 'dataLayer' ? '&l=' + l : '';
+        j.async = true;
+        j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
+        f.parentNode.insertBefore(j, f);
+      })(window, document, 'script', 'dataLayer');
+    </script>
+    <!-- End Google Tag Manager -->
+  </head>
 
-    #app {
-      font-family: Avenir, Helvetica, Arial, sans-serif;
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-      text-align: center;
-      color: #2c3e50;
-      margin-top: 60px;
-    }
-
-  </style>
-  <!-- Google Tag Manager -->
-  <script>
-    (function (w, d, s, l, i) {
-      w[l] = w[l] || [];
-      w[l].push({
-        'gtm.start': new Date().getTime(),
-        event: 'gtm.js'
-      });
-      var f = d.getElementsByTagName(s)[0],
-        j = d.createElement(s),
-        dl = l != 'dataLayer' ? '&l=' + l : '';
-      j.async = true;
-      j.src =
-        'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
-      f.parentNode.insertBefore(j, f);
-    })(window, document, 'script', 'dataLayer');
-  </script>
-  <!-- End Google Tag Manager -->
-</head>
-
-<body id="app">
-  <div style="max-width: 1165px;margin:auto">
-    <header style="width:100%;position:fixed;left:0;top:0px;background-color: #0356A8;padding:0.75rem;z-index: 10;">
-      <div style="max-width: 1280px;margin:auto;display: flex">
-        <kompas-header-account
-          cart-url="/cart"
-          logout-url="/logout"
-          manage-account-url="/manage-count"
-          notification-url="/notif"
-          notification-total=10
-          orders-url="/orders"
-          sidebar-top-spacing=49
-          subscription-url=""
-          read-later-url="/baca-nanti"
-          total-grace-period=5
-          style="margin-left: auto;height: 25px;display: flex;align-items: center;"
-        />
-      </div>
-    </header>
-    <h2>Lipsum Dei</h2>
-    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Adipisci similique omnis dolorem dolores aliquam quis
-      perspiciatis fugiat illum nisi laboriosam accusantium quam explicabo suscipit, asperiores blanditiis, ipsum
-      exercitationem, reiciendis vitae!
-    </p>
-    <!-- <kompas-survey-popup is-show-pop-up="true" survey-url="https://www.bing.com/"></kompas-survey-popup> -->
-    <kompas-paywall type="regular" theme="" paywall_location="Article Detail Page" paywall_subscription_id="" paywall_subscription_price=0 paywall_position=1 tracker_page_type="page_type" tracker_content_id="content_id" tracker_content_type="content_type" tracker_content_title="content_title" tracker_content_categories="content_categories" tracker_user_type="user_type" subscription_status="subscription_status" tracker_page_domain="page_domain" metered_wall_type="metered_wall_type" subscriptionStatus="subscription_status" tracker_epaper_edition="edition" metered_wall_balance=0 is-login="false" is-with-header="false" text-header="this is message for header information" user-guid="111000" tracker_subscription_status="register" swg-enable="true"></kompas-paywall>
-    <!-- <kompas-paywall-video style="border-radius: 20px;" paywall_location="Homepage" paywall_subscription_package="test" paywall_subscription_id="test" paywall_subscription_price=220 paywall_position=4 tracker_page_type="page_type" tracker_content_id="content_id" tracker_content_type="content_type" tracker_content_title="content_title" tracker_content_categories="content_categories" tracker_user_type="user_type" tracker_subscription_status="subscription_status" page_domain="page_domain" metered_wall_type="metered_wall_type" tracker_metered_wall_balance=3> -->
-    <!-- <div style="position:relative">
+  <body id="app">
+    <div style="max-width: 1165px; margin: auto">
+      <header style="width: 100%; position: fixed; left: 0; top: 0px; background-color: #0356a8; padding: 0.75rem; z-index: 10">
+        <div style="max-width: 1280px; margin: auto; display: flex">
+          <kompas-header-account
+            cart-url="/cart"
+            logout-url="/logout"
+            manage-account-url="/manage-count"
+            notification-url="/notif"
+            notification-total="10"
+            orders-url="/orders"
+            sidebar-top-spacing="49"
+            subscription-url=""
+            read-later-url="/baca-nanti"
+            total-grace-period="5"
+            style="margin-left: auto; height: 25px; display: flex; align-items: center"
+          />
+        </div>
+      </header>
+      <h2>Lipsum Dei</h2>
+      <p>
+        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Adipisci similique omnis dolorem dolores aliquam quis perspiciatis fugiat illum nisi laboriosam accusantium quam
+        explicabo suscipit, asperiores blanditiis, ipsum exercitationem, reiciendis vitae!
+      </p>
+      <!-- <kompas-survey-popup is-show-pop-up="true" survey-url="https://www.bing.com/"></kompas-survey-popup> -->
+      <kompas-paywall
+        type="regular"
+        theme=""
+        paywall_location="Article Detail Page"
+        paywall_subscription_id=""
+        paywall_subscription_price="0"
+        paywall_position="1"
+        tracker_page_type="page_type"
+        tracker_content_id="content_id"
+        tracker_content_type="content_type"
+        tracker_content_title="content_title"
+        tracker_content_categories="content_categories"
+        tracker_user_type="user_type"
+        subscription_status="subscription_status"
+        tracker_page_domain="page_domain"
+        metered_wall_type="metered_wall_type"
+        subscriptionStatus="subscription_status"
+        tracker_epaper_edition="edition"
+        metered_wall_balance="0"
+        is-login="false"
+        is-with-header="false"
+        text-header="this is message for header information"
+        user-guid="111000"
+        tracker_subscription_status="register"
+        swg-enable="true"
+      ></kompas-paywall>
+      <!-- <kompas-paywall-video style="border-radius: 20px;" paywall_location="Homepage" paywall_subscription_package="test" paywall_subscription_id="test" paywall_subscription_price=220 paywall_position=4 tracker_page_type="page_type" tracker_content_id="content_id" tracker_content_type="content_type" tracker_content_title="content_title" tracker_content_categories="content_categories" tracker_user_type="user_type" tracker_subscription_status="subscription_status" page_domain="page_domain" metered_wall_type="metered_wall_type" tracker_metered_wall_balance=3> -->
+      <!-- <div style="position:relative">
       <img src="https://dmm0a91a1r04e.cloudfront.net/JTYT2c26Hx4LmglA652oauNuViI=/1280x545/https%3A%2F%2Fasset.kgnewsroom.com%2Fphoto%2Fpre%2F2021%2F11%2F23%2Fa59d565e-def1-4efc-8790-2969a8b949d8_jpeg.jpg" style="width: 100%; height: 100%; object-fit: cover;" alt="bg-kompas-subscription-mobile" />
 
     </div>
@@ -103,23 +129,24 @@ <h2>Lipsum Dei</h2>
       gtm-login-medium="login-paywall" gtm-branding-medium="mengapakompasid-paywall" gtm-paywall-medium="paywall">
       gtm-track-content="https://kompaspedia.kompas.id/baca/infografik/kronologi/awal-berdirinya-perserikatan-bangsa-bangsa"
     </kid-paywall> -->
-    <!-- <kid-recommender
+      <!-- <kid-recommender
         auth-key="1f77b0ab-bb93-11ea-8390-000d3aa2b8f9"
         dark-mode="false"
       ></kid-recommender> -->
-    <!--
+      <!--
 
         post-tags="Kemenkes, Kemenlu, vaksin Covid-19, satgas penanganan covid-19, diplomasi vaksin, Wiku Adisasmito, Jakarta, diplomasi vaksin, Satgas Penanganan Covid-19"
         post-title="Soal Potensi Kehabisan Vaksin, Satgas: Pemerintah Terus Berdiplomasi untuk Cegah Kekosongan"
         post-url="https://nasional.kompas.com/read/2021/03/30/10352831/soal-potensi-kehabisan-vaksin-satgas-pemerintah-terus-berdiplomasi-untuk"
         utm="utm_source=kompascom&utm_campaign=wasweswos"
       -->
-    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Adipisci similique omnis dolorem dolores aliquam quis
-      perspiciatis fugiat illum nisi laboriosam accusantium quam explicabo suscipit, asperiores blanditiis, ipsum
-      exercitationem, reiciendis vitae!</p>
-    <!-- <button class="btn btn-primary mb-5">tes bootstrap class</button> -->
-  </div>
-  <kid-metered-paywall
+      <p>
+        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Adipisci similique omnis dolorem dolores aliquam quis perspiciatis fugiat illum nisi laboriosam accusantium quam
+        explicabo suscipit, asperiores blanditiis, ipsum exercitationem, reiciendis vitae!
+      </p>
+      <!-- <button class="btn btn-primary mb-5">tes bootstrap class</button> -->
+    </div>
+    <!-- <kid-metered-paywall
     countdown-article=1
     paywall_location="Article Detail Page"
     paywall_subscription_package=""
@@ -136,25 +163,27 @@ <h2>Lipsum Dei</h2>
     page_domain="page_domain"
     metered_wall_type="metered_wall_type"
     epaper_edition="epaper_edition"
-  ></kid-metered-paywall>
-  <!-- <kompas-grace-period total-grace-period=5></kompas-grace-period> -->
-  <div>
-    <kompas-footer />
-    <!-- <kompas-footer wording-message="wadidaw"/> -->
-  </div>
-</body>
-
+  ></kid-metered-paywall> -->
+    <!-- <kompas-grace-period total-grace-period=5></kompas-grace-period> -->
+    <kompas-metered-register countdown-article="1" />
+    <div>
+      <kompas-footer />
+      <!-- <kompas-footer wording-message="wadidaw"/> -->
+    </div>
+  </body>
 </html>
 <script>
   setTimeout(() => {
-    document.querySelector('kompas-header-account').setAttribute('user-data', JSON.stringify({
-      "userName": "User Fullname",
-      "expired": "Berakhir: 6 hari lagi",
-      "isNearExpired": false,
-      "activeInfo": "Kompas Digital Premium 1 Bulan - Auto Renewal Example Text",
-      "isMembership": true,
-      "updateMembership": "Perbarui Langganan",
-    }))
-  }, 1000)
-
+    document.querySelector('kompas-header-account').setAttribute(
+      'user-data',
+      JSON.stringify({
+        userName: 'User Fullname',
+        expired: 'Berakhir: 6 hari lagi',
+        isNearExpired: false,
+        activeInfo: 'Kompas Digital Premium 1 Bulan - Auto Renewal Example Text',
+        isMembership: true,
+        updateMembership: 'Perbarui Langganan',
+      }),
+    );
+  }, 1000);
 </script>
diff --git a/tailwind.config.js b/tailwind.config.js
index 59f1fa6..9d7708c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,14 +5,14 @@ module.exports = {
     colors: {
       brand: {
         1: '#00559A',
-        2: '#00447B'
+        2: '#00447B',
       },
       dark: {
         1: '#A0A0A0',
         2: '#383838',
         3: '#252525',
         4: '#1E1E1E',
-        5: '#121212'
+        5: '#121212',
       },
       white: '#FFFFFF',
       black: '#000000',
@@ -23,7 +23,7 @@ module.exports = {
         400: '#057DF4',
         500: '#0468CB',
         600: '#0356A8',
-        700: '#023B73'
+        700: '#023B73',
       },
       grey: {
         100: '#FFFFFF',
@@ -32,7 +32,7 @@ module.exports = {
         400: '#999999',
         500: '#666666',
         600: '#333333',
-        700: '#000000'
+        700: '#000000',
       },
       green: {
         100: '#EEFCD2',
@@ -41,7 +41,7 @@ module.exports = {
         400: '#6AC322',
         500: '#50A718',
         600: '#3A8C11',
-        700: '#1A5D06'
+        700: '#1A5D06',
       },
       orange: {
         100: '#FFEECC',
@@ -50,7 +50,7 @@ module.exports = {
         400: '#FF7A00',
         500: '#DB5D00',
         600: '#B74400',
-        700: '#7A2100'
+        700: '#7A2100',
       },
       red: {
         100: '#FEE1CF',
@@ -59,7 +59,7 @@ module.exports = {
         400: '#F32013',
         500: '#D00D12',
         600: '#AE091B',
-        700: '#740322'
+        700: '#740322',
       },
       yellow: {
         100: '#FFF9CC',
@@ -68,15 +68,15 @@ module.exports = {
         400: '#FFCC00',
         500: '#DBAA00',
         600: '#B78B00',
-        700: '#7A5700'
-      }
+        700: '#7A5700',
+      },
     },
     extend: {
       spacing: {
-        76: '19rem'
+        76: '19rem',
       },
       rotate: {
-        55: '55deg'
+        55: '55deg',
       },
       fontSize: {
         xxs: '0.625rem',
@@ -84,12 +84,13 @@ module.exports = {
       // Add custom font famliy
       fontFamily: {
         'pt-sans': ['"PT Sans"', 'Arial', 'Verdana', 'Helvetica', 'sans-serif'],
+        'lora': ['Lora', 'serif'],
       },
       width: {
-        '106': '32rem'
-      }
+        106: '32rem',
+      },
     },
   },
   variants: {},
   plugins: [],
-}
+};

From 48a76b4337d2aa62ba7379c321f9f83e7acce830 Mon Sep 17 00:00:00 2001
From: Billy Surya <billy.surya@kompas.com>
Date: Thu, 24 Aug 2023 18:19:18 +0700
Subject: [PATCH 3/7] feat(kompas-metered-register): handle banner content
 based on article count

---
 .../kompas-metered-register.css               | 12 +++
 .../kompas-metered-register.tsx               | 75 ++++++++++++-------
 2 files changed, 59 insertions(+), 28 deletions(-)

diff --git a/src/components/kompas-metered-register/kompas-metered-register.css b/src/components/kompas-metered-register/kompas-metered-register.css
index 57c42fb..6a9a5c0 100644
--- a/src/components/kompas-metered-register/kompas-metered-register.css
+++ b/src/components/kompas-metered-register/kompas-metered-register.css
@@ -10,6 +10,12 @@
   opacity: 1;
 }
 
+.chevron-down {
+  transform: rotate(180deg);
+  -webkit-transform: rotate(180deg);
+  transition: transform 0.2s ease-out;
+}
+
 .icon {
   @apply h-3 w-3;
 
@@ -28,3 +34,9 @@
     }
   }
 }
+
+@screen sm {
+  .banner-opened {
+    height: 400px;
+  }
+}
diff --git a/src/components/kompas-metered-register/kompas-metered-register.tsx b/src/components/kompas-metered-register/kompas-metered-register.tsx
index d2896ce..959724a 100644
--- a/src/components/kompas-metered-register/kompas-metered-register.tsx
+++ b/src/components/kompas-metered-register/kompas-metered-register.tsx
@@ -16,48 +16,56 @@ export class KompasMeteredRegister {
   @State() registerUrl: string = 'https://account.kompas.cloud/register';
   @State() isShowBanner: boolean = true;
   @State() isExpandBanner: boolean = false;
-
   /**
    * prop countdownArticle untuk menghandle sudah berapa artikel gratis yang user baca.
    */
   @Prop() countdownArticle: number = 0;
 
   /**
-   * mengelola tampilan pada section metered paywall
+   * mengelola tampilan pada section metered register
    */
   private bannerContent(): void {
     if (!this.isExpandBanner) {
       return (
-        <p class="text-base md:text-lg font-lora">
-          Ini Adalah <b>Artikel Gratis Terakhir</b> Anda. <b>Daftar Akun untuk Terus Membaca.</b>
-        </p>
+        <Fragment>
+          <div class="text-base md:text-lg text-center md:text-left font-lora mb-3 md:mb-0 px-8 md:px-0">
+            {this.countdownArticle > 1 ? (
+              <b>Dukung Jurnalisme Berkualitas dengan Mendaftar Akun Kompas.id.</b>
+            ) : (
+              <span>
+                Ini Adalah <b>Artikel Gratis Terakhir</b> Anda. <b>Daftar Akun untuk Terus Membaca.</b>
+              </span>
+            )}
+          </div>
+          <div class="md:self-center">{this.registerButtonTemplate()}</div>
+        </Fragment>
       );
     } else {
       return (
         <Fragment>
           <div class="flex flex-col-reverse md:flex-row justify-center gap-8">
-            <div class="text-center md:text-left md:w-1/2">
+            <div class="flex flex-col justify-evenly text-center md:text-left md:w-5/12 gap-2">
               <p class="text-lg md:text-2xl font-lora">
-                Anda Sedang Membaca{' '}
-                <b>
-                  Artikel Premium <br />
-                  Gratis Terakhir
-                </b>{' '}
-                dari Kompas.id
+                {this.countdownArticle > 1 ? (
+                  <b>Tertarik dengan Artikel Ini? Daftar untuk Akses Artikel Menarik Lainnya</b>
+                ) : (
+                  <span>
+                    Anda Sedang Membaca <b>Artikel Premium Gratis Terakhir</b> dari Kompas.id
+                  </span>
+                )}
               </p>
-              <p class="text-sm md:text-base my-3">
-                Ayo daftar akun untuk akses ke beragam artikel dan fitur premium. Anda juga mendukung jurnalisme berkualitas dengan mendaftar akun.
+              <p class="text-sm md:text-base">
+                {this.countdownArticle > 1 ? (
+                  <Fragment>Dapatkan akses ke beragam konten dan fitur premium Kompas.id.</Fragment>
+                ) : (
+                  <Fragment>Ayo daftar akun untuk akses ke beragam artikel dan fitur premium.</Fragment>
+                )}{' '}
+                Anda juga mendukung jurnalisme berkualitas dengan mendaftar akun.
               </p>
-              <div class="md:self-start">
-                <button onClick={this.redirectToRegister} class="bg-green-500 p-2 w-full md:w-auto rounded-md font-bold text-grey-100 px-6 text-sm md:text-base">
-                  Daftar Akun
-                </button>
-              </div>
+              <div class="md:self-start">{this.registerButtonTemplate()}</div>
             </div>
             <div class="flex justify-center">
-              <img src="https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/paywall_ilustrasi3-03_1.png" class="h-40 w-40 md:w-full md:h-full">
-                {' '}
-              </img>
+              <img src="https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/paywall_ilustrasi3-03_1.png" class="h-40 w-40 md:w-full md:h-full" />
             </div>
           </div>
         </Fragment>
@@ -65,10 +73,21 @@ export class KompasMeteredRegister {
     }
   }
 
+  /**
+   * template button register
+   */
+  private registerButtonTemplate = (): void => {
+    return (
+      <button onClick={this.redirectToRegister} class="bg-green-500 p-1.5 w-full md:w-auto rounded-md font-bold text-grey-100 px-5 text-sm md:text-base">
+        Daftar Akun
+      </button>
+    );
+  };
+
   private bannerTemplate = (): void => {
     return (
       <Fragment>
-        <div class="text-grey-600 text-sm md:text-lg self-center text-left ml-auto">{this.bannerContent()}</div>
+        <div class="block md:flex items-center justify-center gap-8 text-grey-600 text-sm md:text-lg self-center text-left ml-auto">{this.bannerContent()}</div>
       </Fragment>
     );
   };
@@ -94,12 +113,12 @@ export class KompasMeteredRegister {
       <Host>
         {this.isShowBanner ? (
           <div class="sticky bottom-0 w-full h-full">
-            <div class={`w-full bg-blue-100 lg:px-0 bottom-0 ${this.isExpandBanner ? 'p-8' : 'p-4'}`}>
-              <div class="flex max-w-7xl m-auto relative justify-center">
+            <div class={`w-full bg-blue-100 px-4 lg:px-0 bottom-0 py-4`}>
+              <div class="flex max-w-7xl m-auto justify-center relative">
                 <div class="flex flex-col">{this.bannerTemplate()}</div>
-                <div class="absolute right-0 top-0">
-                  <button onClick={this.triggerExpandBanner} class="bg--gray p-2 rounded-md ">
-                    <div class="icon icon-brand-1" innerHTML={chevronUp}></div>
+                <div class="absolute right-0 top-0.5">
+                  <button onClick={this.triggerExpandBanner} class="bg--gray p-2.5 rounded-md ">
+                    <div class={`icon icon-brand-1 ${this.isExpandBanner && 'chevron-down'}`} innerHTML={chevronUp}></div>
                   </button>
                 </div>
               </div>

From df8bc0bb7f0251c2eabd2ee9dff3c079c0c643d3 Mon Sep 17 00:00:00 2001
From: Billy Surya <billy.surya@kompas.com>
Date: Mon, 28 Aug 2023 15:01:52 +0700
Subject: [PATCH 4/7] feat(kompas-metered-register): update banner styling

---
 .../kompas-metered-register.css                  |  9 ++-------
 .../kompas-metered-register.tsx                  | 16 ++++++++--------
 2 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/src/components/kompas-metered-register/kompas-metered-register.css b/src/components/kompas-metered-register/kompas-metered-register.css
index 6a9a5c0..4a7aac6 100644
--- a/src/components/kompas-metered-register/kompas-metered-register.css
+++ b/src/components/kompas-metered-register/kompas-metered-register.css
@@ -5,11 +5,6 @@
   width: 100%;
 }
 
-.bg--gray {
-  background-color: #f4f4f4;
-  opacity: 1;
-}
-
 .chevron-down {
   transform: rotate(180deg);
   -webkit-transform: rotate(180deg);
@@ -27,8 +22,8 @@
     }
   }
 
-  &-brand-1 {
-    @apply text-brand-1;
+  &-blue-600 {
+    @apply text-blue-600;
     & svg {
       @apply fill-current;
     }
diff --git a/src/components/kompas-metered-register/kompas-metered-register.tsx b/src/components/kompas-metered-register/kompas-metered-register.tsx
index 959724a..dd9ee49 100644
--- a/src/components/kompas-metered-register/kompas-metered-register.tsx
+++ b/src/components/kompas-metered-register/kompas-metered-register.tsx
@@ -28,7 +28,7 @@ export class KompasMeteredRegister {
     if (!this.isExpandBanner) {
       return (
         <Fragment>
-          <div class="text-base md:text-lg text-center md:text-left font-lora mb-3 md:mb-0 px-8 md:px-0">
+          <div class="text-base md:text-lg font-lora mb-3 mt-1 md:mb-0 md:mt-0 pr-14 md:px-0">
             {this.countdownArticle > 1 ? (
               <b>Dukung Jurnalisme Berkualitas dengan Mendaftar Akun Kompas.id.</b>
             ) : (
@@ -43,8 +43,8 @@ export class KompasMeteredRegister {
     } else {
       return (
         <Fragment>
-          <div class="flex flex-col-reverse md:flex-row justify-center gap-8">
-            <div class="flex flex-col justify-evenly text-center md:text-left md:w-5/12 gap-2">
+          <div class="flex flex-col-reverse md:flex-row justify-center gap-4 md:gap-8">
+            <div class="flex flex-col justify-evenly text-center md:text-left md:w-5/12 gap-4 md:gap-2">
               <p class="text-lg md:text-2xl font-lora">
                 {this.countdownArticle > 1 ? (
                   <b>Tertarik dengan Artikel Ini? Daftar untuk Akses Artikel Menarik Lainnya</b>
@@ -87,7 +87,7 @@ export class KompasMeteredRegister {
   private bannerTemplate = (): void => {
     return (
       <Fragment>
-        <div class="block md:flex items-center justify-center gap-8 text-grey-600 text-sm md:text-lg self-center text-left ml-auto">{this.bannerContent()}</div>
+        <div class="block lg:flex items-center justify-center gap-8 text-grey-600 text-sm md:text-lg self-center text-left ml-auto">{this.bannerContent()}</div>
       </Fragment>
     );
   };
@@ -113,12 +113,12 @@ export class KompasMeteredRegister {
       <Host>
         {this.isShowBanner ? (
           <div class="sticky bottom-0 w-full h-full">
-            <div class={`w-full bg-blue-100 px-4 lg:px-0 bottom-0 py-4`}>
-              <div class="flex max-w-7xl m-auto justify-center relative">
+            <div class={`w-full bg-blue-100 px-4 xl:px-0 bottom-0 py-4`}>
+              <div class="flex lg:max-w-7xl m-auto justify-center relative">
                 <div class="flex flex-col">{this.bannerTemplate()}</div>
                 <div class="absolute right-0 top-0.5">
-                  <button onClick={this.triggerExpandBanner} class="bg--gray p-2.5 rounded-md ">
-                    <div class={`icon icon-brand-1 ${this.isExpandBanner && 'chevron-down'}`} innerHTML={chevronUp}></div>
+                  <button onClick={this.triggerExpandBanner} class="bg-blue-200 p-2.5 rounded-md ">
+                    <div class={`icon icon-blue-600 ${this.isExpandBanner && 'chevron-down'}`} innerHTML={chevronUp}></div>
                   </button>
                 </div>
               </div>

From 07eb5a3531a3fa08e09ba553110938d87b7b366c Mon Sep 17 00:00:00 2001
From: Billy Surya <billy.surya@kompas.com>
Date: Mon, 28 Aug 2023 15:33:13 +0700
Subject: [PATCH 5/7] feat(kompas-metered-register): generate readme

---
 .../kompas-metered-register/readme.md         | 35 +++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 src/components/kompas-metered-register/readme.md

diff --git a/src/components/kompas-metered-register/readme.md b/src/components/kompas-metered-register/readme.md
new file mode 100644
index 0000000..2e9a042
--- /dev/null
+++ b/src/components/kompas-metered-register/readme.md
@@ -0,0 +1,35 @@
+# kompas-metered-register
+
+### Standar
+
+Anda perlu meletakkan _tag_ komponen `<kompas-metered-register />` pada halaman anda.
+
+### Elemen
+
+```javascript
+<kompas-metered-register countdown-article="1" />
+```
+
+### Detail Props
+
+### 1. countdownArticle
+
+- Value berapa banyak sisa artikel yang dapat dibaca
+  Jika valuenya:
+  0 => tidak ada yg muncul
+  1 => akan menampilkan text artikel terakhir
+  lebih dari 1 => akan menampilkan normal text
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property           | Attribute           | Description                                                                        | Type     | Default |
+| ------------------ | ------------------- | ---------------------------------------------------------------------------------- | -------- | ------- |
+| `countdownArticle` | `countdown-article` | prop countdownArticle untuk menghandle sudah berapa artikel gratis yang user baca. | `number` | `0`     |
+
+
+----------------------------------------------
+
+*Terbikin oleh tim front-end kompas.id*

From 52b9ed29211b2568c52a187852c5a0861054cdb5 Mon Sep 17 00:00:00 2001
From: Billy Surya <billy.surya@kompas.com>
Date: Mon, 28 Aug 2023 17:06:34 +0700
Subject: [PATCH 6/7] feat(kompas-metered-register): update spec testing file

---
 .../kompas-metered-register.spec.tsx          | 92 ++++++++++++++++++-
 .../kompas-metered-register.tsx               |  2 +-
 2 files changed, 91 insertions(+), 3 deletions(-)

diff --git a/src/components/kompas-metered-register/kompas-metered-register.spec.tsx b/src/components/kompas-metered-register/kompas-metered-register.spec.tsx
index 820a0fe..4bed52b 100644
--- a/src/components/kompas-metered-register/kompas-metered-register.spec.tsx
+++ b/src/components/kompas-metered-register/kompas-metered-register.spec.tsx
@@ -1,8 +1,12 @@
+jest.mock('../../../assets/fontawesome-free-5.15.3-web/svgs/solid/chevron-down.svg', () => ({ chevronDown: '' }));
+jest.mock('../../../assets/fontawesome-free-5.15.3-web/svgs/solid/chevron-up.svg', () => ({ chevronUp: '' }));
+
 import { newSpecPage } from '@stencil/core/testing';
 import { KompasMeteredRegister } from './kompas-metered-register';
 
 describe('kompas-metered-register', () => {
-  it('renders', async () => {
+  // countdown-article = 0 or nothing passed
+  it('should renders nothing', async () => {
     const page = await newSpecPage({
       components: [KompasMeteredRegister],
       html: `<kompas-metered-register></kompas-metered-register>`,
@@ -10,7 +14,91 @@ describe('kompas-metered-register', () => {
     expect(page.root).toEqualHtml(`
       <kompas-metered-register>
         <mock:shadow-root>
-          <slot></slot>
+        </mock:shadow-root>
+      </kompas-metered-register>
+    `);
+  });
+
+  // countdown-article = 1
+  it('should renders content for last article quota', async () => {
+    const page = await newSpecPage({
+      components: [KompasMeteredRegister],
+      html: `<kompas-metered-register countdown-article=1></kompas-metered-register>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <kompas-metered-register countdown-article=1>
+        <mock:shadow-root>
+          <div class="bottom-0 h-full sticky w-full">
+            <div class="bg-blue-100 bottom-0 px-4 py-4 w-full xl:px-0">
+              <div class="flex justify-center lg:max-w-7xl m-auto relative">
+                <div class="flex flex-col">
+                  <div class="block gap-8 items-center justify-center lg:flex md:text-lg ml-auto self-center text-grey-600 text-left text-sm">
+                    <div class="font-lora mb-3 md:mb-0 md:mt-0 md:px-0 md:text-lg mt-1 pr-14 text-base">
+                      <span>
+                        Ini Adalah
+                        <b>
+                          Artikel Gratis Terakhir
+                        </b>
+                        Anda.
+                        <b>
+                          Daftar Akun untuk Terus Membaca.
+                        </b>
+                      </span>
+                    </div>
+                    <div class="md:self-center">
+                      <button class="bg-green-500 font-bold md:text-base md:w-auto p-1.5 px-5 rounded-md text-grey-100 text-sm w-full">
+                        Daftar Akun
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div class="absolute right-0 top-0.5">
+                  <button class="bg-blue-200 p-2.5 rounded-md">
+                    <div class="false icon icon-blue-600"></div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </mock:shadow-root>
+      </kompas-metered-register>
+    `);
+  });
+
+  // countdown-article = 2 ( > 1 )
+  it('should renders content for article quota more than one', async () => {
+    const page = await newSpecPage({
+      components: [KompasMeteredRegister],
+      html: `<kompas-metered-register countdown-article=2></kompas-metered-register>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <kompas-metered-register countdown-article=2>
+        <mock:shadow-root>
+          <div class="bottom-0 h-full sticky w-full">
+            <div class="bg-blue-100 bottom-0 px-4 py-4 w-full xl:px-0">
+              <div class="flex justify-center lg:max-w-7xl m-auto relative">
+                <div class="flex flex-col">
+                  <div class="block gap-8 items-center justify-center lg:flex md:text-lg ml-auto self-center text-grey-600 text-left text-sm">
+                    <div class="font-lora mb-3 md:mb-0 md:mt-0 md:px-0 md:text-lg mt-1 pr-14 text-base">
+                      <b>
+                        Dukung Jurnalisme Berkualitas dengan Mendaftar Akun Kompas.id.
+                      </b>
+                    </div>
+                    <div class="md:self-center">
+                      <button class="bg-green-500 font-bold md:text-base md:w-auto p-1.5 px-5 rounded-md text-grey-100 text-sm w-full">
+                        Daftar Akun
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div class="absolute right-0 top-0.5">
+                  <button class="bg-blue-200 p-2.5 rounded-md">
+                    <div class="false icon icon-blue-600"></div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
         </mock:shadow-root>
       </kompas-metered-register>
     `);
diff --git a/src/components/kompas-metered-register/kompas-metered-register.tsx b/src/components/kompas-metered-register/kompas-metered-register.tsx
index dd9ee49..89548ef 100644
--- a/src/components/kompas-metered-register/kompas-metered-register.tsx
+++ b/src/components/kompas-metered-register/kompas-metered-register.tsx
@@ -100,7 +100,7 @@ export class KompasMeteredRegister {
     this.isExpandBanner = !this.isExpandBanner;
   };
 
-  componentDidLoad() {
+  componentWillLoad() {
     const getCountdown = this.countdownArticle;
     if (!getCountdown) {
       this.isShowBanner = false;

From ec67b05e637678b03819d86ebf323926444eff93 Mon Sep 17 00:00:00 2001
From: Billy Surya <billy.surya@kompas.com>
Date: Tue, 29 Aug 2023 13:48:45 +0700
Subject: [PATCH 7/7] chore: update package version to `v1.7.0`

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ca62a96..6f0ea1b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@kompasid/web-components",
-  "version": "v1.6.2",
+  "version": "v1.7.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@kompasid/web-components",
-      "version": "v1.6.2",
+      "version": "v1.7.0",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "2.20.0",
diff --git a/package.json b/package.json
index a200699..5f1dbb0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kompasid/web-components",
-  "version": "v1.6.2",
+  "version": "v1.7.0",
   "description": "Kompas.id reusable web components",
   "main": "dist/index.cjs.js",
   "module": "dist/custom-elements/index.js",