@kompasid/lit-web-components 0.9.10 → 0.9.13

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

@@ -2,14 +2,20 @@ import { html, css, LitElement, nothing } from 'lit'
 import { property, customElement } from 'lit/decorators.js'
 import { TWStyles } from '../../../tailwind/tailwind.js'
 import { addGoogleFonts } from '../../utils/googleFont.js'
-import { JsonPackageData, PackageData } from '../kompasid-freewall/types.js'
-import { faCheck } from '../../../assets/font-awesome.js'
-import { redirectToRegister } from '../../utils/cta.js'
+import { formatRupiah } from '../../utils/formatRupiah.js'
+import { CardPackage } from '../kompasid-freewall/types.js'
 
 @customElement('kompasid-freewall-body')
 export class KompasFreewallBody extends LitElement {
   static styles = [
     css`
+      .hideScroll::-webkit-scrollbar {
+        height: 0px;
+      }
+      .hideScroll {
+        scrollbar-width: none;
+      }
+
       .font-lora {
         font-family: 'Lora', 'Georgia', 'serif';
       }
@@ -81,24 +87,15 @@ export class KompasFreewallBody extends LitElement {
    * Props
    */
   /**
-   * property isLogin untuk menghandle apakah user sudah login atau belum
-   * property type untuk menghandle tipe freewall
-   * property onSubscriptionClick to handle cta when subscription button is clicked
-   * packageData sebagai data package yang diambil dari kompasid-freewall
+   * property bodyData to handle multiple data card CardPackage
+   * property onButtonClick to handle cta when button is clicked and set specific card url and position
    */
 
-  @property({ type: Boolean }) isLogin = false
-  @property({ type: String }) type: 'article' | 'landing_page' = 'article'
-  @property() onSubscriptionClick = () => {}
-  @property({ type: Object }) packageData: PackageData = {} as PackageData
-  @property({ type: Object }) jsonPackageData: JsonPackageData =
-    {} as JsonPackageData
-
-  description = [
-    'Akses seluruh konten Kompas.id di web & aplikasi',
-    'ePaper hingga 30 edisi terakhir',
-    'Buku digital tiap bulannya di aplikasi ',
-  ]
+  @property() onButtonClick = (url: string, position: number) => ({
+    url,
+    position,
+  })
+  @property({ type: Object }) bodyData: CardPackage[] = []
 
   /**
    * Lifecycle
@@ -114,99 +111,61 @@ export class KompasFreewallBody extends LitElement {
    * Component
    */
 
-  private subscriptionCardComponent() {
+  private newCard(item: CardPackage) {
     return html`
-      <div class="relative">
+      <div class="relative snap-start scroll-mx-4 w-[276px] flex lg:w-auto">
         <div
           id="subscription-card"
-          class="flex justify-between items-center relative z-10 flex-col w-[328px] ${this
-            .isLogin
-            ? '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"
+          class="flex justify-between items-start relative z-10 flex-col w-[328px] py-3 px-[10px] md:p-5 md:pt-3 rounded-[10px] bg-white border border-grey-300"
         >
-          <div
-            class="flex w-full flex-col ${this.isLogin
-              ? 'items-center md:w-[374px] text-center'
-              : 'items-start text-start'}"
-          >
-            <h5
-              class="font-lora text-lg md:text-xl font-bold leading-[30px] ${this
-                .isLogin && 'w-60 md:w-full'} text-grey-600"
-            >
-              ${this.isLogin
-                ? this.jsonPackageData.subscriptionTitle
-                : this.jsonPackageData.subscriptionTitleGuest}
+          <div class="flex w-full flex-col items-start mb-4 text-start">
+            <h5 class="font-lora leading-[30px] text-grey-600">
+              ${item.title}
             </h5>
-            ${this.descriptionSection()}
+          </div>
+          <div class="text-xl text-grey-600 font-lora mb-8">
+            <div>
+              ${item.priceDiscount
+                ? html`
+                    <span class="text-sm text-grey-400"
+                      ><s>${formatRupiah(item.priceBased)}</s></span
+                    >
+                  `
+                : nothing}
+              <span class="${item.priceDiscount ? 'text-orange-400' : ''}"
+                >${formatRupiah(
+                  item.priceDiscount ? item.priceDiscount : item.priceBased
+                )}</span
+              >/<span>${item.duration}</span>
+            </div>
+            ${item.priceDiscount
+              ? html` <div class="text-sm text-grey-500 font-sans mt-3">
+                  Selanjutnya ${formatRupiah(item.priceBased)}/${item.duration}
+                </div>`
+              : nothing}
           </div>
           <button
-            @click=${this.onSubscriptionClick}
-            class="bg-green-500 whitespace-nowrap w-full rounded ${this
-              .isLogin &&
-            'md:w-[370px]'} md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-white font-bold leading-[18px]"
+            @click=${() => this.onButtonClick(item.cta.url, item.position)}
+            class="whitespace-nowrap w-full rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base font-bold leading-[18px] ${item.ribbon
+              ? 'text-white bg-brand-1'
+              : 'text-brand-1 bg-white border border-brand-1'}"
           >
-            ${this.jsonPackageData.subscriptionButtonText}
+            ${item.cta.text}
           </button>
         </div>
-        <div id="ribbon-container">
-          <div
-            class="text-[11px] font-medium text-grey-600 font-roboto-condensed flex justify-center items-center"
-          >
-            <span class="-ml-2">Penawaran Terbaik</span>
-          </div>
-        </div>
+        ${item.ribbon
+          ? html`<div id="ribbon-container">
+              <div
+                class="text-[11px] font-medium text-grey-600 font-roboto-condensed flex justify-center items-center"
+              >
+                <span class="-ml-2">Penawaran Terbaik</span>
+              </div>
+            </div>`
+          : nothing}
       </div>
     `
   }
 
-  private registerCardComponent() {
-    return html`
-      <div
-        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
-            class="font-lora text-lg md:text-xl font-bold leading-[30px] text-grey-600"
-          >
-            ${this.jsonPackageData.registerTitle}
-          </h5>
-          <div class="flex flex-col space-y-1 mt-3 mb-4 md:mt-4 md:mb-5">
-            ${this.jsonPackageData.registerDescription.map(
-              item => html`
-                <div class="flex items-start lg:items-center">
-                  <div class="mt-1 lg:mt-0">${faCheck()}</div>
-                  <h6 class="text-base text-grey-600 ml-1 text-start">
-                    ${item}
-                  </h6>
-                </div>
-              `
-            )}
-          </div>
-        </div>
-        <button
-          @click=${() => redirectToRegister('freewall')}
-          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]"
-        >
-          ${this.jsonPackageData.registerButtonText}
-        </button>
-      </div>
-    `
-  }
-
-  private descriptionSection() {
-    return html`<div class="flex flex-col space-y-1 mt-3 mb-4 md:mt-4 md:mb-5">
-      ${this.jsonPackageData.subscriptionDescription.map(
-        item =>
-          html`
-            <div class="flex items-start lg:items-center">
-              <div class="mt-1 lg:mt-0">${faCheck()}</div>
-              <h6 class="text-base text-grey-600 ml-1 text-start">${item}</h6>
-            </div>
-          `
-      )}
-    </div>`
-  }
-
   /**
    * Render Statement
    */
@@ -214,10 +173,9 @@ export class KompasFreewallBody extends LitElement {
   render() {
     return html`
       <div
-        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"
+        class="w-full h-full flex flex-row pt-[5px] relative snap-x overflow-x-scroll gap-4 hideScroll px-4 sm:px-0 sm:gap-6 sm:justify-center"
       >
-        ${this.subscriptionCardComponent()}
-        ${!this.isLogin ? this.registerCardComponent() : nothing}
+        ${this.bodyData.map(item => this.newCard(item))}
       </div>
     `
   }

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

@@ -0,0 +1,224 @@
+import { html, css, LitElement, nothing } from 'lit'
+import { property, customElement } from 'lit/decorators.js'
+import { TWStyles } from '../../../tailwind/tailwind.js'
+import { addGoogleFonts } from '../../utils/googleFont.js'
+import { JsonPackageData, PackageData } from '../kompasid-freewall/types.js'
+import { faCheck } from '../../../assets/font-awesome.js'
+import { redirectToRegister } from '../../utils/cta.js'
+
+@customElement('kompasid-freewall-body')
+export class KompasFreewallBody extends LitElement {
+  static styles = [
+    css`
+      .font-lora {
+        font-family: 'Lora', 'Georgia', 'serif';
+      }
+
+      .font-roboto-condensed {
+        font-family: 'Roboto Condensed', sans-serif;
+      }
+
+      /* ----- Ribbon Container ---------------------------------------*/
+      #ribbon-container {
+        background: transparent;
+        height: 130px;
+        width: 200px;
+        position: absolute;
+        top: -5px;
+        right: -5px;
+        overflow: hidden;
+      }
+
+      /* ----- Top Curl ---------------------------------------*/
+      #ribbon-container:before {
+        content: '';
+        display: block;
+        -webkit-border-radius: 10px 10px 0px 0px;
+        border-radius: 10px 10px 0px 0px;
+        width: 35px;
+        height: 10px;
+        position: absolute;
+        right: 60px;
+        background: #b78b00;
+        z-index: 1;
+      }
+
+      /* ----- Right Curl ---------------------------------------*/
+      #ribbon-container:after {
+        content: '';
+        display: block;
+        -webkit-border-radius: 0px 10px 10px 0px;
+        border-radius: 0px 10px 10px 0px;
+        width: 10px;
+        height: 35px;
+        position: absolute;
+        right: 0px;
+        top: 60px;
+        background: #b78b00;
+      }
+
+      /* ----- Ribbon ---------------------------------------*/
+      #ribbon-container > div {
+        width: 140px;
+        height: 28px;
+        position: relative;
+        top: 24px;
+        right: -100px;
+        z-index: 11;
+        overflow: hidden;
+        transform: rotate(45deg);
+        -ms-transform: rotate(45deg); /* IE 9 */
+        -moz-transform: rotate(45deg); /* Firefox */
+        -webkit-transform: rotate(45deg); /* Safari and Chrome */
+        -o-transform: rotate(45deg); /* Opera */
+        background: #ffcc00;
+      }
+    `,
+    TWStyles,
+  ]
+
+  /**
+   * Props
+   */
+  /**
+   * property isLogin untuk menghandle apakah user sudah login atau belum
+   * property type untuk menghandle tipe freewall
+   * property onSubscriptionClick to handle cta when subscription button is clicked
+   * packageData sebagai data package yang diambil dari kompasid-freewall
+   */
+
+  @property({ type: Boolean }) isLogin = false
+  @property({ type: String }) type: 'article' | 'landing_page' = 'article'
+  @property() onSubscriptionClick = () => {}
+  @property({ type: Object }) packageData: PackageData = {} as PackageData
+  @property({ type: Object }) jsonPackageData: JsonPackageData =
+    {} as JsonPackageData
+
+  description = [
+    'Akses seluruh konten Kompas.id di web & aplikasi',
+    'ePaper hingga 30 edisi terakhir',
+    'Buku digital tiap bulannya di aplikasi ',
+  ]
+
+  /**
+   * Lifecycle
+   */
+
+  override async connectedCallback() {
+    super.connectedCallback()
+    await this.updateComplete
+    addGoogleFonts(['pt-sans', 'lora', 'roboto-condensed'])
+  }
+
+  /**
+   * Component
+   */
+
+  private subscriptionCardComponent() {
+    return html`
+      <div class="relative">
+        <div
+          id="subscription-card"
+          class="flex justify-between items-center relative z-10 flex-col w-[328px] ${this
+            .isLogin
+            ? '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
+              ? 'items-center md:w-[374px] text-center'
+              : 'items-start text-start'}"
+          >
+            <h5
+              class="font-lora text-lg md:text-xl font-bold leading-[30px] ${this
+                .isLogin && 'w-60 md:w-full'} text-grey-600"
+            >
+              ${this.isLogin
+                ? this.jsonPackageData.subscriptionTitle
+                : this.jsonPackageData.subscriptionTitleGuest}
+            </h5>
+            ${this.descriptionSection()}
+          </div>
+          <button
+            @click=${this.onSubscriptionClick}
+            class="bg-green-500 whitespace-nowrap w-full rounded ${this
+              .isLogin &&
+            'md:w-[370px]'} md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-white font-bold leading-[18px]"
+          >
+            ${this.jsonPackageData.subscriptionButtonText}
+          </button>
+        </div>
+        <div id="ribbon-container">
+          <div
+            class="text-[11px] font-medium text-grey-600 font-roboto-condensed flex justify-center items-center"
+          >
+            <span class="-ml-2">Penawaran Terbaik</span>
+          </div>
+        </div>
+      </div>
+    `
+  }
+
+  private registerCardComponent() {
+    return html`
+      <div
+        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
+            class="font-lora text-lg md:text-xl font-bold leading-[30px] text-grey-600"
+          >
+            ${this.jsonPackageData.registerTitle}
+          </h5>
+          <div class="flex flex-col space-y-1 mt-3 mb-4 md:mt-4 md:mb-5">
+            ${this.jsonPackageData.registerDescription.map(
+              item => html`
+                <div class="flex items-start lg:items-center">
+                  <div class="mt-1 lg:mt-0">${faCheck()}</div>
+                  <h6 class="text-base text-grey-600 ml-1 text-start">
+                    ${item}
+                  </h6>
+                </div>
+              `
+            )}
+          </div>
+        </div>
+        <button
+          @click=${() => redirectToRegister('freewall')}
+          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]"
+        >
+          ${this.jsonPackageData.registerButtonText}
+        </button>
+      </div>
+    `
+  }
+
+  private descriptionSection() {
+    return html`<div class="flex flex-col space-y-1 mt-3 mb-4 md:mt-4 md:mb-5">
+      ${this.jsonPackageData.subscriptionDescription.map(
+        item =>
+          html`
+            <div class="flex items-start lg:items-center">
+              <div class="mt-1 lg:mt-0">${faCheck()}</div>
+              <h6 class="text-base text-grey-600 ml-1 text-start">${item}</h6>
+            </div>
+          `
+      )}
+    </div>`
+  }
+
+  /**
+   * Render Statement
+   */
+
+  render() {
+    return html`
+      <div
+        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}
+      </div>
+    `
+  }
+}

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

@@ -2,12 +2,36 @@
 
 ## 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"`     |
-| `packageData`             | `packageData`            | packageData sebagai data package yang akan di offer    | `PackageData` | `{}`     |
+| Property         | Attribute   | Description                                                                                       | Type              | Default                  |
+| ---------------- | ----------- | ------------------------------------------------------------------------------------------------- | ----------------- | ------------------------ |
+| `bodyData`       | —           | Data array berisi daftar paket langganan (berupa kartu) yang akan ditampilkan.                  | `CardPackage[]`   | `[]`                     |
+| `onButtonClick`  | —           | Fungsi untuk menangani klik tombol CTA di tiap kartu. Menerima parameter URL dan posisi paket.  | `Function`        | `(url: string, position: number) => ({ url, position })` |
 
-----------------------------------------------
+---
 
-*Terbikin oleh tim front-end kompas.id*
+## CardPackage Structure
+
+Struktur objek yang digunakan di dalam `bodyData[]`:
+
+| Property         | Type       | Description                                                       |
+| ---------------- | ---------- | ----------------------------------------------------------------- |
+| `position`       | `number`   | Posisi urutan kartu di dalam tampilan.                            |
+| `packageId`      | `string`   | ID unik paket.                                                    |
+| `packageSlug`    | `string`   | Slug URL untuk paket tersebut.                                    |
+| `title`          | `string`   | Judul atau nama paket langganan.                                  |
+| `ribbon`         | `boolean`  | Menandai apakah paket adalah penawaran spesial ("Penawaran Terbaik"). |
+| `priceBased`     | `string`   | Harga asli (tanpa diskon).                                        |
+| `priceDiscount`  | `string`   | Harga setelah diskon (opsional).                                  |
+| `duration`       | `string`   | Durasi langganan (contoh: `"12 bulan"` atau `"bulan"`).           |
+| `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-freewall-head/KompasFreewallHead.ts

@@ -4,7 +4,7 @@ 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'
+import { HeadDataFreeWall } from '../kompasid-freewall/types.js'
 
 @customElement('kompasid-freewall-head')
 export class KompasFreewallHead extends LitElement {
@@ -13,36 +13,30 @@ export class KompasFreewallHead extends LitElement {
   /**
    * 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
+   * property headData to handle data copy text and cta button
+   * property expand to handle what copy text is used
+   * property onButtonClick to handle cta when button is clicked and set specific card url
+   * property toggleExpand to handle expand and collpase button
    */
+  @property() toggleExpand = () => {}
+  @property({ type: Boolean }) expand = true
+  @property() onButtonClick = (url: string) => url
+  @property({ type: Object }) headData: HeadDataFreeWall = {
+    headCopyExpand: 'Expand Default.',
+    headCopyCollapse: 'Collapse Default.',
+    cta: {
+      text: 'Langganan',
+      url: '#',
+    },
+  }
 
+  // Getter
   get headCopy() {
-    return (
-      (this.expand ? this.head_copy_expand : this.head_copy_collapse) ||
-      'Akses seluruh konten dan fitur Kompas.id dengan berlangganan.'
-    )
+    return this.expand
+      ? this.headData.headCopyExpand
+      : this.headData.headCopyCollapse
   }
 
   /**
@@ -63,17 +57,15 @@ export class KompasFreewallHead extends LitElement {
     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="hidden sm: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
+            <p class="w-full text-grey-600 font-bold">${this.headCopy}</p>
+            ${!this.expand && this.headData.cta.url
               ? 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]"
+                  @click=${() => this.onButtonClick(this.headData.cta.url)}
+                  class="bg-brand-1 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}
+                  ${this.headData.cta.text}
                 </button>`
               : nothing}
           </div>
@@ -83,18 +75,18 @@ export class KompasFreewallHead extends LitElement {
               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'}">
+              <div class="transition-all ${!this.expand && 'rotate-180'}">
                 ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}
               </div>
             </button>
           </div>
         </div>
-        ${!this.expand
+        ${!this.expand && this.headData.cta.url && this.headData.cta.text
           ? 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]"
+              @click=${() => this.onButtonClick(this.headData.cta.url)}
+              class="bg-brand-1 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}
+              ${this.headData.cta.text}
             </button>`
           : nothing}
       </div>