@kompasid/lit-web-components 0.9.10 → 0.9.13

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

@@ -0,0 +1,103 @@
+import { html, css, LitElement, nothing } from 'lit'
+import { property, customElement } from 'lit/decorators.js'
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js'
+import { TWStyles } from '../../../tailwind/tailwind.js'
+import { addGoogleFonts } from '../../utils/googleFont.js'
+import { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'
+import { JsonPackageData, PackageData } from '../kompasid-freewall/types.js'
+
+@customElement('kompasid-freewall-head')
+export class KompasFreewallHead extends LitElement {
+  static styles = [css``, TWStyles]
+
+  /**
+   * Props
+   */
+  /**
+   * property isLogin untuk menghandle apakah user sudah login atau belum
+   * property type untuk menghandle tipe freewall
+   * property head_copy_expand to update copy header when expand
+   * property head_copy_collapse to update copy header when collapse
+   * property expand to handle expand/collapse
+   * property toggleExpand to handle toggle expand/collapse
+   * property onSubscriptionClick to handle cta when subscription button is clicked
+   */
+
+  @property({ type: Boolean }) isLogin = false
+  @property({ type: String }) type: 'article' | 'landing_page' = 'article'
+  @property({ type: String }) head_copy_expand = ''
+  @property({ type: String }) head_copy_collapse = ''
+  @property({ type: Boolean }) expand = true
+  @property() toggleExpand = () => {}
+  @property() onSubscriptionClick = () => {}
+  @property({ type: Object }) packageData: PackageData = {} as PackageData
+  @property({ type: Object }) jsonPackageData: JsonPackageData =
+    {} as JsonPackageData
+
+  /**
+   * Getter
+   */
+
+  get headCopy() {
+    return (
+      (this.expand ? this.head_copy_expand : this.head_copy_collapse) ||
+      'Akses seluruh konten dan fitur Kompas.id dengan berlangganan.'
+    )
+  }
+
+  /**
+   * Lifecycle
+   */
+
+  override async connectedCallback() {
+    super.connectedCallback()
+    await this.updateComplete
+    addGoogleFonts(['pt-sans'])
+  }
+
+  /**
+   * Render Statement
+   */
+
+  render() {
+    return html`
+      <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">
+          <div
+            class="hidden ${this.expand ? 'md:block' : 'lg:block'} w-9 h-9"
+          ></div>
+          <div class="flex items-center md:justify-start">
+            <p class="w-full text-grey-600">${this.headCopy}</p>
+            ${!this.expand
+              ? html`<button
+                  @click=${this.onSubscriptionClick}
+                  class="bg-green-500 hidden md:block ml-3 whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-white font-bold leading-[18px]"
+                >
+                  ${this.jsonPackageData.subscriptionButtonText}
+                </button>`
+              : nothing}
+          </div>
+          <div>
+            <button
+              @click=${this.toggleExpand}
+              aria-label="Toggle Expand"
+              class="h-9 w-9 flex ml-2 items-center justify-center text-blue-500 rounded bg-blue-200"
+            >
+              <div class="${!this.expand && 'rotate-180'}">
+                ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}
+              </div>
+            </button>
+          </div>
+        </div>
+        ${!this.expand
+          ? html`<button
+              @click=${this.onSubscriptionClick}
+              class="bg-green-500 block md:hidden whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-white font-bold leading-[18px]"
+            >
+              ${this.jsonPackageData.subscriptionButtonText}
+            </button>`
+          : nothing}
+      </div>
+    `
+  }
+}

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

@@ -2,16 +2,32 @@
 
 ## Properties
 
-| Property                       | Attribute                      | Description                                                                              | Type     | Default |
-| ------------------------------ | ------------------------------ | ---------------------------------------------------------------------------------------- | -------- | ------- |
-| `isLogin`             | `isLogin`            | property isLogin untuk menghandle apakah user sudah login atau belum        | `boolean` | `false`     |
-| `type`             | `type`            | property type untuk menghandle tipe freewall        | `"article" \| "landing_page"` | `"article"`     
-| `expand`             | `expand`            | property expand to handle expand/collapse       | `boolean` | `true`     |
-| `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` | `""`     |
-| `packageData`             | `packageData`            | packageData sebagai data package yang akan di offer    | `PackageData` | `{}`     |
-| `toggleExpand`             | `toggleExpand`            |property toggleExpand to handle toggle expand/collapse   | `Function` | `() => {}`     |
-
-----------------------------------------------
-
-*Terbikin oleh tim front-end kompas.id*
+| Property       | Attribute | Description                                                                                     | Type                | Default                                                                                                                                                                                   |
+| --------------- | --------- | ----------------------------------------------------------------------------------------------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `expand`        | `expand`  | Property untuk mengatur apakah tampilan sedang dalam mode *expand* atau *collapse*.             | `boolean`           | `true`                                                                                                                                                                                    |
+| `headData`      | —         | Data header berisi teks copy untuk expand/collapse dan data tombol CTA.                        | `HeadDataFreeWall`  | `{ headCopyExpand: 'Expand Default.', headCopyCollapse: 'Collapse Default.', cta: { text: 'Langganan', url: '#' } }`                                                                     |
+| `toggleExpand`  | —         | Fungsi untuk menangani aksi klik tombol expand/collapse.                                       | `Function`          | `() => {}`                                                                                                                                                                                |
+| `onButtonClick` | —         | Fungsi untuk menangani klik pada tombol CTA.                                                   | `Function`          | `(url: string) => url`                                                                                                                                                                    |
+
+---
+
+## HeadDataFreeWall Structure
+
+Tambahan deskripsi untuk membantu developer:
+
+| Property          | Type     | Description                                               |
+| ------------------ | -------- | --------------------------------------------------------- |
+| `headCopyExpand`   | `string` | Teks header yang ditampilkan saat dalam keadaan expand.   |
+| `headCopyCollapse` | `string` | Teks header yang ditampilkan saat dalam keadaan collapse. |
+| `cta`              | `object` | Data tombol CTA.                                          |
+
+**cta structure:**
+
+| Property | Type     | Description                    |
+| -------- | -------- | ------------------------------ |
+| `text`   | `string` | Label tombol CTA.              |
+| `url`    | `string` | URL tujuan saat tombol diklik. |
+
+---
+
+*Dibuat oleh tim front-end kompas.id*

package/src/components/kompasid-grace-period/KompasGracePeriod.ts

@@ -133,7 +133,7 @@ export class KompasGracePeriod extends LitElement {
     this.sendGtmEvent('subscribe_button_clicked')
 
     window.open(
-      `${this.checkoutPage}/kdp?productId=${this.paywall_subscription_id}&referrer=${originHost}&source=${this.source}`
+      `${this.checkoutPage}/v2/kdp?productId=${this.paywall_subscription_id}&autorenewal=1&referrer=${originHost}&source=${this.source}`
     )
   }
 

package/src/components/kompasid-menu-side-bar/KompasMenuSideBar.ts

@@ -62,7 +62,6 @@ export class KompasMenuSideBar extends LitElement {
     const assignedNodes = slot!.assignedNodes({ flatten: true })
 
     this.hasSlotContent = assignedNodes.length > 0
-    console.log('Slot content exists?', this.hasSlotContent)
   }
 
   static styles = [
@@ -247,7 +246,7 @@ export class KompasMenuSideBar extends LitElement {
             class="py-0.5 px-1.5 rounded-full"
             style="position: relative; display: inline-flex; background-color:#D71920;"
           >
-            <span class="font-bold font-pt-sans text-xs text-white capitalize"
+            <span class="font-bold font-sans text-xs text-white capitalize"
               >Baru</span
             >
           </div>
@@ -304,7 +303,7 @@ export class KompasMenuSideBar extends LitElement {
                 ${unsafeSVG(getFontAwesomeIcon('fas', 'bars'))}
               </div>
               <span
-                class="font-pt-sans hidden sm:inline ml-2 tracking-wide font-bold ${this
+                class="font-sans hidden sm:inline ml-2 tracking-wide font-bold ${this
                   .isDark
                   ? 'text-[#FFFFFF]'
                   : 'text-brand-1'}"
@@ -366,9 +365,7 @@ export class KompasMenuSideBar extends LitElement {
                             </div>
                           `
                         : ''}
-                      <span
-                        class="font-pt-sans relative text-xs text-[#666666]"
-                      >
+                      <span class="font-sans relative text-xs text-[#666666]">
                         ${item.name}
                       </span>
                       <div class="ml-1">
@@ -386,7 +383,7 @@ export class KompasMenuSideBar extends LitElement {
             <div class="flex justify-between flex-col">
               ${this.dataSidebar.feature.map(
                 item => html`
-                  <div class="w-full font-pt-sans">
+                  <div class="w-full font-sans">
                     <!-- Parent item -->
                     <div
                       class="flex items-center justify-between px-4 text-sm font-medium text-gray-700 transition-all cursor-pointer"
@@ -398,7 +395,7 @@ export class KompasMenuSideBar extends LitElement {
                         <div class="flex items-center space-x-3">
                           <span
                             class="text-xl text-brand-1 h-8 flex items-center 
-                            ${item.icon === null ? 'w-6' : 'max-w-max w-8'}"
+                            ${item.icon === null ? 'w-8' : 'max-w-max w-8'}"
                           >
                             ${item.icon &&
                             Array.isArray(item.icon) &&
@@ -421,7 +418,7 @@ export class KompasMenuSideBar extends LitElement {
                             item.redDot[0].end
                           )
                             ? html`<span
-                                class="bg-orange-600 h-2 relative rounded-full w-2 -top-[12px]"
+                                class="bg-orange-400 h-2 relative rounded-full w-2 flex shrink-0 -top-[12px]"
                               ></span>`
                             : ''}
                         </div>
@@ -478,7 +475,7 @@ export class KompasMenuSideBar extends LitElement {
                                       child.redDot[0].end
                                     )
                                       ? html`<span
-                                          class="bg-orange-600 h-2 relative rounded-full w-2 -top-[12px]"
+                                          class="bg-orange-400 h-2 relative rounded-full w-2 flex shrink-0 -top-[12px]"
                                         ></span>`
                                       : ''}
                                     <div></div>
@@ -500,7 +497,7 @@ export class KompasMenuSideBar extends LitElement {
             <div class="w-full flex justify-between flex-col">
               ${this.dataSidebar.category.map(
                 item => html`
-                  <div class="w-full font-pt-sans">
+                  <div class="w-full font-sans">
                     <!-- Parent item -->
                     <div
                       class="flex items-center justify-between text-sm font-medium px-4 transition-all cursor-pointer"
@@ -538,7 +535,7 @@ export class KompasMenuSideBar extends LitElement {
                             item.redDot[0].end
                           )
                             ? html`<span
-                                class="bg-orange-600 h-2 relative rounded-full w-2 -top-[12px]"
+                                class="bg-orange-400 h-2 relative rounded-full w-2 flex shrink-0 -top-[12px]"
                               ></span>`
                             : ''}
                         </div>
@@ -595,7 +592,7 @@ export class KompasMenuSideBar extends LitElement {
                                       child.redDot[0].end
                                     )
                                       ? html`<span
-                                          class="bg-orange-600 h-2 relative rounded-full w-2 -top-[12px]"
+                                          class="bg-orange-400 h-2 relative rounded-full w-2 flex shrink-0 -top-[12px]"
                                         ></span>`
                                       : ''}
                                   </div>

package/src/components/kompasid-metered-paywall/KompasMeteredPaywall.ts

@@ -84,24 +84,27 @@ export class KompasMeteredPaywall extends LitElement {
   @property({ type: Number }) tracker_metered_wall_balance = 0
 
   private getCountdownArticle() {
-    const getCountdown = this.countdownArticle
-    const { maxQuota } = this
-
-    if (getCountdown > 0 && getCountdown < maxQuota) {
-      return html`
-        <p>
-          Anda memiliki sisa
-          <b>${maxQuota - getCountdown} dari ${maxQuota}</b> artikel premium
-          gratis bulan ini. ${this.packageData.subscriptionText}
-        </p>
-      `
-    }
-    return html`
-      <p>
-        Anda sedang membaca <b>artikel gratis terakhir bulan ini.</b> ${this
-          .packageData.subscriptionText}
-      </p>
-    `
+    // const getCountdown = this.countdownArticle
+    // const { maxQuota } = this
+
+    // if (getCountdown > 0 && getCountdown < maxQuota) {
+    //   return html`
+    //     <p>
+    //       Anda memiliki sisa
+    //       <b>${maxQuota - getCountdown} dari ${maxQuota}</b> artikel premium
+    //       gratis bulan ini. ${this.packageData.subscriptionText}
+    //     </p>
+    //   `
+    // }
+    // return html`
+    //   <p>
+    //     Anda sedang membaca <b>artikel gratis terakhir bulan ini.</b> ${this
+    //       .packageData.subscriptionText}
+    //   </p>
+    // `
+
+    // Handle tanpa kuota
+    return html` <p>${this.packageData.subscriptionText}</p> `
   }
 
   override connectedCallback() {

package/tailwind/tailwind.css

@@ -154,7 +154,7 @@ html,
   -o-tab-size: 4;
      tab-size: 4;
   /* 3 */
-  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: "PT Sans", Arial, Verdana, Helvetica, sans-serif;
   /* 4 */
   font-feature-settings: normal;
   /* 5 */
@@ -730,6 +730,10 @@ video {
   margin-bottom: 1.5rem;
 }
 
+.mb-8 {
+  margin-bottom: 2rem;
+}
+
 .ml-0\.5 {
   margin-left: 0.125rem;
 }
@@ -1015,6 +1019,10 @@ video {
   width: 216px;
 }
 
+.w-\[276px\] {
+  width: 276px;
+}
+
 .w-\[296px\] {
   width: 296px;
 }
@@ -1118,6 +1126,19 @@ video {
   cursor: pointer;
 }
 
+.snap-x {
+  scroll-snap-type: x var(--tw-scroll-snap-strictness);
+}
+
+.snap-start {
+  scroll-snap-align: start;
+}
+
+.scroll-mx-4 {
+  scroll-margin-left: 1rem;
+  scroll-margin-right: 1rem;
+}
+
 .grid-flow-row {
   grid-auto-flow: row;
 }
@@ -1268,6 +1289,10 @@ video {
   overflow-y: auto;
 }
 
+.overflow-x-scroll {
+  overflow-x: scroll;
+}
+
 .overflow-y-scroll {
   overflow-y: scroll;
 }
@@ -1514,9 +1539,9 @@ video {
   background-color: rgb(255 238 204 / var(--tw-bg-opacity, 1));
 }
 
-.bg-orange-600 {
+.bg-orange-400 {
   --tw-bg-opacity: 1;
-  background-color: rgb(183 68 0 / var(--tw-bg-opacity, 1));
+  background-color: rgb(255 122 0 / var(--tw-bg-opacity, 1));
 }
 
 .bg-red-100 {
@@ -1781,12 +1806,8 @@ video {
   text-align: start;
 }
 
-.font-pt-sans {
-  font-family: "PT Sans", Arial, Verdana, Helvetica, sans-serif;
-}
-
 .font-sans {
-  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: "PT Sans", Arial, Verdana, Helvetica, sans-serif;
 }
 
 .font-serif {
@@ -2066,6 +2087,10 @@ video {
 }
 
 @media (min-width: 640px) {
+  .sm\:block {
+    display: block;
+  }
+
   .sm\:inline {
     display: inline;
   }
@@ -2082,6 +2107,19 @@ video {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 
+  .sm\:justify-center {
+    justify-content: center;
+  }
+
+  .sm\:gap-6 {
+    gap: 1.5rem;
+  }
+
+  .sm\:px-0 {
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+
   .sm\:px-16 {
     padding-left: 4rem;
     padding-right: 4rem;
@@ -2531,6 +2569,10 @@ video {
     width: 410px;
   }
 
+  .lg\:w-auto {
+    width: auto;
+  }
+
   .lg\:max-w-7xl {
     max-width: 80rem;
   }

package/tailwind/tailwind.ts

@@ -159,8 +159,7 @@ export const TWStyles = css`
     -o-tab-size: 4;
     tab-size: 4;
     /* 3 */
-    font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
-      'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    font-family: 'PT Sans', Arial, Verdana, Helvetica, sans-serif;
     /* 4 */
     font-feature-settings: normal;
     /* 5 */
@@ -738,6 +737,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     margin-bottom: 1.5rem;
   }
 
+  .mb-8 {
+    margin-bottom: 2rem;
+  }
+
   .ml-0\\.5 {
     margin-left: 0.125rem;
   }
@@ -1023,6 +1026,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     width: 216px;
   }
 
+  .w-\\[276px\\] {
+    width: 276px;
+  }
+
   .w-\\[296px\\] {
     width: 296px;
   }
@@ -1130,6 +1137,19 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     cursor: pointer;
   }
 
+  .snap-x {
+    scroll-snap-type: x var(--tw-scroll-snap-strictness);
+  }
+
+  .snap-start {
+    scroll-snap-align: start;
+  }
+
+  .scroll-mx-4 {
+    scroll-margin-left: 1rem;
+    scroll-margin-right: 1rem;
+  }
+
   .grid-flow-row {
     grid-auto-flow: row;
   }
@@ -1280,6 +1300,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     overflow-y: auto;
   }
 
+  .overflow-x-scroll {
+    overflow-x: scroll;
+  }
+
   .overflow-y-scroll {
     overflow-y: scroll;
   }
@@ -1526,9 +1550,9 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     background-color: rgb(255 238 204 / var(--tw-bg-opacity, 1));
   }
 
-  .bg-orange-600 {
+  .bg-orange-400 {
     --tw-bg-opacity: 1;
-    background-color: rgb(183 68 0 / var(--tw-bg-opacity, 1));
+    background-color: rgb(255 122 0 / var(--tw-bg-opacity, 1));
   }
 
   .bg-red-100 {
@@ -1793,13 +1817,8 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     text-align: start;
   }
 
-  .font-pt-sans {
-    font-family: 'PT Sans', Arial, Verdana, Helvetica, sans-serif;
-  }
-
   .font-sans {
-    font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
-      'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    font-family: 'PT Sans', Arial, Verdana, Helvetica, sans-serif;
   }
 
   .font-serif {
@@ -2089,6 +2108,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   }
 
   @media (min-width: 640px) {
+    .sm\\:block {
+      display: block;
+    }
+
     .sm\\:inline {
       display: inline;
     }
@@ -2105,6 +2128,19 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
 
+    .sm\\:justify-center {
+      justify-content: center;
+    }
+
+    .sm\\:gap-6 {
+      gap: 1.5rem;
+    }
+
+    .sm\\:px-0 {
+      padding-left: 0px;
+      padding-right: 0px;
+    }
+
     .sm\\:px-16 {
       padding-left: 4rem;
       padding-right: 4rem;
@@ -2554,6 +2590,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       width: 410px;
     }
 
+    .lg\\:w-auto {
+      width: auto;
+    }
+
     .lg\\:max-w-7xl {
       max-width: 80rem;
     }

package/tailwind.config.js

@@ -88,7 +88,7 @@ export default {
       },
       // Add custom font famliy
       fontFamily: {
-        'pt-sans': ['"PT Sans"', 'Arial', 'Verdana', 'Helvetica', 'sans-serif'],
+        'sans': ['"PT Sans"', 'Arial', 'Verdana', 'Helvetica', 'sans-serif'],
       },
       width: {
         '106': '32rem'