@kompasid/lit-web-components 0.6.7 → 0.7.0

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

@@ -933,8 +933,8 @@ export class KompasIdPaywallBody extends LitElement {
             ? this.primaryPackages(item)
             : this.secondaryPackages(item)
         )}
-        ${this.swgEnable ? this.swgPackageSection() : nothing}
         ${this.freeTrialPackageSection()} ${this.freeTrialPopUp()}
+        ${this.swgEnable ? this.swgPackageSection() : nothing}
       </div>
     `
   }
@@ -1075,12 +1075,16 @@ export class KompasIdPaywallBody extends LitElement {
         class="fixed w-full h-full inset-0 flex justify-center items-center z-50 bg-black bg-opacity-75 hidden"
       >
         <div
-          class="bg-white rounded w-11/12 sm:w-3/4 md:w-1/2 lg:w-1/3 2xl:w-1/4 p-6 text-center"
+          class="${this.isDark
+            ? 'bg-dark-4'
+            : 'bg-white'} rounded w-11/12 sm:w-3/4 md:w-1/2 lg:w-1/3 2xl:w-1/4 p-6 text-center"
         >
           <div class="w-full flex justify-end px-2">
             <button
               @click=${this.closeFreeTrialPopup}
-              class="w-8 h-8 pl-4 text-grey-400"
+              class="w-8 h-8 pl-4 ${this.isDark
+                ? 'text-grey-300'
+                : 'text-grey-400'}"
             >
               ${unsafeSVG(getFontAwesomeIcon('fas', 'xmark', 24, 24))}
             </button>
@@ -1093,11 +1097,17 @@ export class KompasIdPaywallBody extends LitElement {
               />
             </div>
           </div>
-          <p class="font-bold text-lg text-grey-600 mt-4">
+          <p
+            class="font-bold text-lg ${this.isDark
+              ? 'text-white'
+              : 'text-grey-600'} mt-4"
+          >
             Coba Gratis Kompas.id di Aplikasi
           </p>
           <div
-            class="hidden lg:block lg:flex flex border border-grey-300 rounded mt-4 px-8 py-4 items-center"
+            class="${this.isDark
+              ? 'bg-dark-3 border border-dark-9'
+              : 'bg-white border border-grey-300'} hidden lg:block lg:flex flex rounded mt-4 px-8 py-4 items-center"
           >
             <div class="w-1/3 flex mr-6">
               <img
@@ -1105,13 +1115,19 @@ export class KompasIdPaywallBody extends LitElement {
                 alt="QR Code Deep Link"
               />
             </div>
-            <div class="w-2/3 text-base text-grey-600 text-left">
+            <div
+              class="w-2/3 text-base ${this.isDark
+                ? 'text-dark-7'
+                : 'text-grey-600'} text-left"
+            >
               Coba gratis 3 hari Kompas.id melalui aplikasi. Pindai kode QR
               dengan ponsel atau tablet untuk mengunduh aplikasi.
             </div>
           </div>
           <div
-            class="text-base text-grey-600 text-center lg:hidden px-2 md:px-8"
+            class="text-base ${this.isDark
+              ? 'text-dark-7'
+              : 'text-grey-600'} text-center lg:hidden px-2 md:px-8"
           >
             Dapatkan akses gratis selama 3 hari ke konten dan fitur premium
             Kompas.id di aplikasi.
@@ -1121,22 +1137,34 @@ export class KompasIdPaywallBody extends LitElement {
               href="https://play.google.com/store/apps/details?id=id.kompas.app"
               target="_blank"
               ><img
-                src="https://cdn-www.kompas.id/halaman-unduh/image/google-play-badge.png"
+                src="${this.isDark
+                  ? 'https://kompasid-production-www.s3.ap-southeast-1.amazonaws.com/web-component/Button_Download%20Google%20Play_Dark%20Mode.svg'
+                  : 'https://kompasid-production-www.s3.ap-southeast-1.amazonaws.com/web-component/Button_Download%20Google%20Play_Light%20Mode.svg'}"
                 alt="Google Play Badge"
             /></a>
             <a
               href="https://apps.apple.com/id/app/kompas-id/id1242195037?l=id"
               target="_blank"
               ><img
-                src="https://cdn-www.kompas.id/halaman-unduh/image/ios-badge.png"
+                src="${this.isDark
+                  ? 'https://kompasid-production-www.s3.ap-southeast-1.amazonaws.com/web-component/Button_Download%20App%20Store_Dark%20Mode.svg'
+                  : 'https://kompasid-production-www.s3.ap-southeast-1.amazonaws.com/web-component/Button_Download%20App%20Store_Light%20Mode.svg'}"
                 alt="iOS App Store Badge"
             /></a>
           </div>
           <button
             onclick="window.open('https://app.komp.as/langganan', '_blank')"
-            class="h-12 bg-green-500 rounded-md mt-4 flex w-full items-center justify-center lg:hidden"
+            class="h-12 ${this.isDark
+              ? 'bg-green-300'
+              : 'bg-green-500'} rounded-md mt-4 flex w-full items-center justify-center lg:hidden"
           >
-            <h6 class="text-white font-bold p-4">Unduh Sekarang</h6>
+            <h6
+              class="${this.isDark
+                ? 'text-dark-5'
+                : 'text-white'} font-bold p-4"
+            >
+              Unduh Sekarang
+            </h6>
           </button>
         </div>
       </div>

package/src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.ts

@@ -0,0 +1,342 @@
+import { html, css, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { format } from 'date-fns'
+import { id } from 'date-fns/locale/id'
+import { TWStyles } from '../../../tailwind/tailwind.js'
+import { Post, Navigation } from './types.js'
+
+@customElement('kompasid-widget-recirculations-default')
+export class KompasWidgetRecirculationsDefault extends LitElement {
+  static styles = [
+    css`
+      :host {
+        font-family: 'PT Sans', sans-serif;
+      }
+      .chip {
+        align-items: center;
+        border-radius: 0.25rem;
+        display: flex;
+        font-family: 'PT Sans', sans-serif;
+        font-size: 0.75rem;
+        font-weight: bold;
+        height: 1.5rem;
+        justify-content: center;
+        line-height: 1rem;
+        margin-bottom: 0.25rem;
+        padding: 0.375rem 0.5rem;
+      }
+    `,
+    TWStyles,
+  ]
+
+  /**
+   * Props
+   */
+  @property({ type: Array }) posts: Post[][] = []
+  @property({ type: Object }) navigation: Navigation | undefined = undefined
+  @property({ type: String }) accessToken = ''
+  @property({ type: String }) permalinkArticle = ''
+  @property({ type: String }) userGuid = '0'
+  @property({ type: String }) slugs = ''
+  @property({ type: String }) type: 'relatedArticle' | 'otherArticle' =
+    'relatedArticle'
+  @property({ type: String }) mainCategory = ''
+
+  /**
+   * Getters
+   */
+  get navigationPermalink(): string | undefined {
+    return this.navigation?.permalink
+  }
+
+  /**
+   * Fetch Data
+   */
+  async connectedCallback() {
+    super.connectedCallback()
+    try {
+      await this.fetchAccessToken()
+      if (this.type === 'relatedArticle') {
+        await this.relatedArticles()
+      } else if (this.type === 'otherArticle') {
+        await this.otherArticles()
+      }
+    } catch (error) {
+      this.handleFetchError(error)
+    }
+  }
+
+  async fetchAccessToken() {
+    const response = await fetch(
+      'https://api.kompas.id/account/api/v1/login/guest',
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          email: 'anonynous.user@kompas.id',
+        }),
+      }
+    )
+
+    const result = await response.json()
+
+    if (result?.data?.accessToken) {
+      this.accessToken = result.data.accessToken
+    } else {
+      throw new Error('Token akses tidak tersedia dalam respons')
+    }
+  }
+
+  async relatedArticles() {
+    if (!this.accessToken) {
+      throw new Error('Token akses tidak tersedia')
+    }
+
+    const kompasApiAi = 'https://ai.kompas.id/api/v1'
+
+    // Constructing parameters
+    const params = new URLSearchParams()
+    params.append('page_url', this.permalinkArticle)
+    params.append('page_type', 'read')
+    params.append('item_type', 'articles')
+    params.append('guid', this.userGuid)
+    params.append('slugs', this.slugs)
+
+    // Constructing the URL with parameters
+    const endpoint = `${kompasApiAi}/recommendation?${params.toString()}`
+
+    const response = await fetch(endpoint, {
+      headers: {
+        Authorization: `Bearer ${this.accessToken}`,
+        'Content-Type': 'application/json',
+      },
+    })
+
+    const result = await response.json()
+
+    if (result?.result) {
+      const items = result.result
+      const firstChunk = items.slice(0, 5)
+      const secondChunk = items.slice(5, 7)
+      this.posts = [Object.freeze(firstChunk), Object.freeze(secondChunk)]
+      console.log('related article:', this.posts)
+    } else {
+      throw new Error('Data artikel terkait tidak ditemukan')
+    }
+  }
+
+  async otherArticles() {
+    if (!this.accessToken) {
+      throw new Error('Token akses tidak tersedia')
+    }
+
+    const kompasApiCdsSPA = 'https://cds.kompas.id/api/v1'
+
+    // Constructing the URL with parameters
+    const endpoint = `${kompasApiCdsSPA}/article/list/category/${this.mainCategory}`
+
+    const response = await fetch(endpoint, {
+      headers: {
+        Authorization: `Bearer ${this.accessToken}`,
+        'Content-Type': 'application/json',
+      },
+    })
+
+    const result = await response.json()
+
+    if (result?.result) {
+      const items = result.result
+      const firstChunk = items.slice(0, 5)
+      const secondChunk = items.slice(5, 7)
+      this.posts = [Object.freeze(firstChunk), Object.freeze(secondChunk)]
+      console.log('other article:', this.posts)
+    } else {
+      throw new Error('Data artikel lainnya tidak ditemukan')
+    }
+  }
+
+  handleFetchError(error: unknown) {
+    const errorMessage =
+      error instanceof Error ? error.message : 'Kesalahan tidak diketahui'
+    alert(`Terjadi kesalahan: ${errorMessage}`)
+  }
+
+  /**
+   * Function to format date
+   */
+  formatDate(date: string) {
+    return format(new Date(date), 'dd MMMM yyyy', { locale: id })
+  }
+
+  /**
+   * Render widget components
+   */
+
+  private WidgetTitle() {
+    if (this.navigationPermalink) {
+      return html`
+        <a
+          href="${this.navigationPermalink}"
+          class="flex font-sans uppercase items-start mb-6 mt-8"
+        >
+          <h5
+            class="${[
+              'capitalize font-bold font-sans',
+              this.navigationPermalink ? 'text-brand-1' : 'text-grey-600',
+            ].join(' ')}"
+          >
+            ${this.navigation?.name}
+          </h5>
+        </a>
+      `
+    }
+
+    return html`
+      <div class="flex font-sans uppercase items-start mb-6 mt-8">
+        <div>
+          <h5
+            class="${[
+              'capitalize font-bold font-sans',
+              this.navigationPermalink ? 'text-brand-1' : 'text-grey-600',
+            ].join(' ')}"
+          >
+            ${this.navigation?.name}
+          </h5>
+        </div>
+      </div>
+    `
+  }
+
+  renderChips(post: Post) {
+    const chips = []
+    const isAnalisis = post.postTag?.some(tag => tag.slug === 'analisis')
+    const isEksklusif = post.postTag?.some(tag => tag.slug === 'eksklusif')
+    const isFreemium = post.isFreemium === true
+
+    if (isEksklusif) {
+      chips.push(
+        html`
+          <div class="flex">
+            <div class="chip bg-grey-600 text-white">
+              <img
+                src="https://cdn-www.kompas.id/assets/img/icons/kompas-icon-small.svg"
+                alt="Kompas Icon"
+                style="width: 16px; height: 16px; margin-right: 4px;"
+              />
+              Eksklusif
+            </div>
+          </div>
+        `
+      )
+    } else if (isFreemium) {
+      chips.push(
+        html`
+          <div class="flex">
+            <div class="chip bg-blue-100 text-brand-1">Bebas Akses</div>
+          </div>
+        `
+      )
+    } else if (isAnalisis) {
+      chips.push(
+        html`
+          <div class="flex">
+            <div class="chip bg-orange-100 text-orange-500">Analisis</div>
+          </div>
+        `
+      )
+    }
+
+    return chips
+  }
+
+  renderImage(post: Post) {
+    const { thumbnailMedium } = post.thumbnails?.sizes || {}
+    if (!thumbnailMedium) return ''
+
+    const { permalink, width, height } = thumbnailMedium
+    return html`
+      <img
+        src="${permalink}"
+        width="${width}"
+        height="${height}"
+        alt="${post.title}"
+        class="aspect-video object-cover w-full"
+      />
+    `
+  }
+
+  render() {
+    return html`
+      <div class="w-full">
+        <!-- start: widget title -->
+        ${this.WidgetTitle()}
+        <!-- end: widget title -->
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
+          <!-- start: left-post-loop -->
+          <div class="grid grid-cols-1 gap-6">
+            ${this.posts[0]
+              ? this.posts[0].map(
+                  post => html`
+                    <div class="w-full">
+                      <div class="flex">
+                        <div class="w-1/2">${this.renderImage(post)}</div>
+                        <div class="flex-grow pl-4 w-1/2">
+                          <a href="${post.permalink}">
+                            ${this.renderChips(post)}
+                            <h5
+                              class="hover:underline font-bold font-sans leading-tight text-grey-600"
+                            >
+                              ${post.title}
+                            </h5>
+                            <p class="text-grey-600 pt-2">
+                              ${this.formatDate(post.publishedDate)}
+                            </p>
+                          </a>
+                        </div>
+                      </div>
+                    </div>
+                  `
+                )
+              : 'Belum ada artikel'}
+          </div>
+          <!-- end: left-post-loop -->
+
+          <!-- start: right-post-loop -->
+          <div class="flex flex-col w-full">
+            ${this.posts[1]
+              ? this.posts[1].map(
+                  post => html`
+                    <div class="mb-6">
+                      <div class="flex">
+                        <div class="w-1/2">${this.renderImage(post)}</div>
+                        <div class="flex-grow pl-4 w-1/2">
+                          <a href="${post.permalink}">
+                            ${this.renderChips(post)}
+                            <h5
+                              class="hover:underline font-bold font-sans leading-tight text-grey-600"
+                            >
+                              ${post.title}
+                            </h5>
+                            <p class="text-grey-600 pt-2">
+                              ${this.formatDate(post.publishedDate)}
+                            </p>
+                          </a>
+                        </div>
+                      </div>
+                    </div>
+                  `
+                )
+              : ''}
+            <!-- start: ads -->
+            <slot></slot>
+            <!-- end: ads -->
+          </div>
+          <!-- end: right-post-loop -->
+        </div>
+      </div>
+    `
+  }
+}

package/src/components/kompasid-widget-recirculations-default/readme.md

@@ -0,0 +1,57 @@
+# kompasid-widget-recirculations-list
+
+Komponen ini adalah komponen web berbasis LitElement yang digunakan untuk menampilkan daftar aliran artikel dari Kompas.id.
+
+### Contoh Implementasi
+
+```javascript
+const widgetRelatedPost = {
+  navigation: {
+    name: 'Artikel Terkait',
+    permalink: undefined
+  },
+  permalinkArticle: 'https://www.kompas.id/baca/opini/2024/05/02/pesan-bung-karno-jaga-persatuan-dan-keutuhan?open_from=Section_Artikel_Lainnya',
+  slugs: 'persatuan,bung-karno, surat pembaca, eduard lukman, bharoto, wira hardiprakoso, vision'
+}
+
+const widgetOtherPost = {
+  navigation: {
+    name: 'Lainnya Dalam Opini',
+    permalink: '/kategori/opini'
+  }
+}
+
+<div>
+<kompasid-widget-recirculations-default
+  .navigation=${widgetRelatedPost.navigation}
+  .permalinkArticle=${widgetRelatedPost.permalinkArticle}
+  .slugs=${widgetRelatedPost.slugs}
+></kompasid-widget-recirculations-default>
+
+<kompasid-widget-recirculations-default
+  .navigation=${widgetOtherPost.navigation}
+  type='otherArticle'
+  mainCategory='opini'
+></kompasid-widget-recirculations-default>
+</div>
+```
+
+## Properti
+
+| Property           | Attribute       | Deskripsi                                                                                           | Tipe     | Default         | Konten                                      |
+| ------------------ | --------------- | -------------------------------------------------------------------------------------------------- | -------- | --------------- | ------------------------------------------- |
+| `navigation`       | `navigation`    | Navigasi yang berisi nama dan tautan ke kategori atau halaman terkait.  Mengecek value `name` dan `permalink`                            | `Object` | `undefined`     | `Navigation`                                |
+| `userGuid`         | `userGuid`      | GUID pengguna yang sedang menggunakan aplikasi untuk fetch data artikel terkait.                                                    | `String` | `'0'`           |                                             |
+| `slugs`            | `slugs`         | Daftar slug kategori atau tag yang terkait dengan artikel untuk artikel terkait.                                          | `String` | `''`            |                                             |
+| `permalinkArticle` | `permalinkArticle` | Tautan kategori artikel yang sedang ditampilkan atau dibaca untuk rekomendasi artikel terkait.                                     | `String` | `''`            |                                             |
+| `type`             | `type`          | Tipe widget untuk membedakan antara pengambilan data artikel terkait (`relatedArticle`) atau lainnya dalam kategori (`otherArticle`). | `String` | `'relatedArticle'` | `"relatedArticle" \| "otherArticle"` |
+| `mainCategory`     | `mainCategory`  | Kategori utama artikel yang akan ditampilkan jika menggunakan tipe `otherArticle` untuk lainnya dalam kategori.                  | `String` | `''`            |                                             |
+
+
+### Digunakan oleh
+
+- [kompasid-widget-recirculations-default](../kompasid-widget-recirculations-default)
+
+## Kontributor
+
+*Dokumentasi ini dibuat oleh tim front-end Kompas.id.*

package/src/components/kompasid-widget-recirculations-default/types.ts

@@ -0,0 +1,28 @@
+interface PostTag {
+  slug: string
+}
+
+export interface Post {
+  title: string
+  isAnalisis?: boolean
+  isEksklusif?: boolean
+  isFreemium?: boolean
+  featuredImageThumbnailMedium: string
+  permalink: string
+  publishedDate: string
+  postTag?: PostTag[]
+  thumbnails: {
+    sizes: {
+      thumbnailMedium: {
+        permalink: string
+        width: number
+        height: number
+      }
+    }
+  }
+}
+
+export interface Navigation {
+  name: string
+  permalink: string
+}