@kompasid/lit-web-components 0.8.19 → 0.8.21

package/src/components/kompasid-header-account/readme.md

@@ -0,0 +1,46 @@
+# kompasid-header-notification
+
+Ini adalah komponen _header account_ yang akan di implementasi pada header
+
+## Properties
+| Property                       | Attribute                      | Description                                   | Type                      | Default        | Required |
+| ------------------------------ | ------------------------------ | --------------------------------------------- | ------------------------- | -------------- | -------- |
+| `cartUrl`                      | `cart-url`                     | `URL to the shopping cart page`               | `string`                 | `''`           | `no`     |
+| `logoutUrl`                    | `logout-url`                   | `URL to log the user out`                     | `string`                 | `''`           | `no`     |
+| `manageAccountUrl`             | `manage-account-url`           | `URL to manage user account settings`          | `string`                 | `''`           | `no`     |
+| `notificationUrl`              | `notification-url`             | `URL to view user notifications`               | `string`                 | `''`           | `no`     |
+| `ordersUrl`                    | `orders-url`                   | `URL to view user orders`                      | `string`                 | `''`           | `no`     |
+| `readLaterUrl`                 | `read-later-url`               | `URL to access the "Read Later" feature`       | `string`                 | `''`           | `no`     |
+| `userData`                     | `user-data`                    | `Object containing user data`                  | `object`                 | `{}`           | `yes`     |
+| `sidebarTopSpacing`            | `sidebar-top-spacing`          | `Top spacing for the sidebar (in pixels)`      | `number`                 | `0`            | `no`     |
+| `subscriptionUrl`              | `subscription-url`             | `URL to manage subscriptions`                  | `string`                 | `''`           | `no`     |
+| `totalGracePeriod`             | `total-grace-period`           | `Total grace period (in days)`                 | `number`                 | `0`            | `no`     |
+| `theme`                        | `theme`                        | `Component theme`                              | `'default' \| 'primary'` | `'primary'`    | `no`     |
+| `paywall_location`             | `paywall-location`             | `Location of the paywall`                      | `string`                 | `''`           | `no`     |
+| `paywall_subscription_package` | `paywall-subscription-package` | `Subscription package for the paywall`         | `string`                 | `''`           | `no`     |
+| `paywall_subscription_id`      | `paywall-subscription-id`      | `ID of the subscription`                       | `number`                 | `0`            | `no`     |
+| `paywall_subscription_price`   | `paywall-subscription-price`   | `Price of the subscription`                    | `number`                 | `0`            | `no`     |
+| `paywall_position`             | `paywall-position`             | `Position of the paywall`                      | `number`                 | `0`            | `no`     |
+| `tracker_page_type`            | `tracker-page-type`            | `Type of the tracked page`                     | `string`                 | `''`           | `no`     |
+| `tracker_content_id`           | `tracker-content-id`           | `ID of the tracked content`                    | `string`                 | `''`           | `no`     |
+
+---
+
+## Usage
+
+```js
+	<kompas-header-account
+		cart-url="https://gerai.kompas.id/cart"
+		logout-url="https://account.kompas.cloud/logout"
+		manage-account-url="https://account.kompas.cloud/manage-account"
+		notification-url="https://account.kompas.cloud/manage-account/notification"
+		orders-url="https://gerai.kompas.id/my-account/orders"
+		sidebar-top-spacing=48
+		subscription-url="https://www.kompas.id/berlangganan"
+		read-later-url="https://www.kompas.id/bacananti"
+		theme="primary"
+		:user-data="{}"
+	/>
+```
+
+_Terbikin oleh tim front-end kompas.id_

package/src/components/kompasid-header-account-menu/KompasHeaderAccountMenu.ts

@@ -90,11 +90,6 @@ export class KompasHeaderAccountMenu extends LitElement {
    */
   @property({ type: String }) readLaterUrl = 'https://www.kompas.id/baca-nanti'
 
-  /**
-   * Total Notification Count
-   */
-  @property({ type: Number }) notificationTotal: number = 0
-
   // Render Total Bubble
   private renderTotalBubble = (total: number) => {
     if (!total) {

package/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.ts

@@ -110,8 +110,8 @@ export class KompasHeaderAccountProfile extends LitElement {
       return html`
         <div>
           <img
-            class="header-account--membership-icon"
-            src="https://cdn-www.kompas.id/global-header/crown-blue-10.svg"
+            class="header-account--membership-icon h-6 w-6"
+            src="https://cdn-www.kompas.id/global-header/crown-royal-blue-60.svg"
             alt="membership-crown-icon"
           />
         </div>

package/src/components/kompasid-header-notification/KompasHeaderNotification.ts

@@ -12,6 +12,7 @@ import {
   ApiRubrikResponse,
 } from './types.js'
 import { customFetch } from './utils.js'
+import { getHeaderTheme } from '../../utils/getHeaderTheme.js'
 
 @customElement('kompasid-header-notification')
 export class KompasHeaderNotification extends LitElement {
@@ -28,8 +29,9 @@ export class KompasHeaderNotification extends LitElement {
         width: 0.5rem;
         background-color: #ff7a00;
         border-radius: 50%;
-        right: -0.403rem;
-        top: -0.281rem;
+        right: 0.03rem;
+        top: 0.09rem;
+        border: 1.2px solid white;
       }
 
       .break-words {
@@ -155,6 +157,8 @@ export class KompasHeaderNotification extends LitElement {
   @property({ type: String }) accessToken = ''
   @property({ type: String }) refreshToken = ''
   @property({ type: String }) domain = 'id' // 'id' | 'cloud'
+  @property({ type: String }) theme: 'default' | 'primary' = 'default'
+
   @property({ type: String }) tracker_user_type = ''
   @property({ type: String }) tracker_subscription_status = ''
   @property({ type: String }) tracker_page_domain = ''
@@ -332,7 +336,11 @@ export class KompasHeaderNotification extends LitElement {
       >
         ${notificationIndicator()}
         <div class="flex flex-row items-center self-center">
-          <div class="text-white cursor-pointer mt-0.5">
+          <div
+            class="cursor-pointer mt-0.5 ${getHeaderTheme({
+              icon: this.theme,
+            })}"
+          >
             ${unsafeSVG(getFontAwesomeIcon('fas', 'bell', 21, 21))}
           </div>
         </div>
@@ -647,7 +655,11 @@ export class KompasHeaderNotification extends LitElement {
     return html`<div id="headerNotification" class="relative">
       ${this.isDataLoaded
         ? this.notificationIcon()
-        : html`<div class="text-white cursor-pointer mt-0.5 animate-spin">
+        : html`<div
+            class="cursor-pointer mt-0.5 animate-spin ${getHeaderTheme({
+              icon: this.theme,
+            })}"
+          >
             ${unsafeSVG(getFontAwesomeIcon('fa', 'circle-notch', 21, 21))}
           </div>`}
       ${this.isShowDropdown ? this.notificationPopup() : ''}

package/src/components/kompasid-header-notification/readme.md

@@ -14,6 +14,7 @@ Ini adalah komponen _header notification_ yang akan di implementasi pada header
 | `tracker_page_domain`          | `tracker_page_domain`          | `Domain of the tracked page`       | `string` | `''`    | `no`     |
 | `tracker_metered_wall_type`    | `tracker_metered_wall_type`    | `Type of metered wall`             | `string` | `''`    | `no`     |
 | `tracker_metered_wall_balance` | `tracker_metered_wall_balance` | `Balance for metered wall`         | `number` | `0`     | `no`     |
+| `theme`    | `theme`    | `Color Theme`             | `string` | `'default' //'default , primary''`    | `no`     |
 
 ---
 
@@ -29,6 +30,8 @@ Ini adalah komponen _header notification_ yang akan di implementasi pada header
       tracker_page_domain="Kompas.cloud"
       tracker_metered_wall_type="HP"
       tracker_metered_wall_balance="0"
+      iconColor="#ffffff"
+      theme="default" --> // default | primary
       style="margin-left: auto; margin-right:15px"
     />
 ```

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

@@ -50,8 +50,8 @@ export class KompasWidgetRecirculationsDefault extends LitElement {
   async connectedCallback() {
     super.connectedCallback()
     try {
-      await this.fetchAccessToken()
       if (this.type === 'relatedArticle') {
+        await this.fetchAccessToken()
         await this.relatedArticles()
       } else if (this.type === 'otherArticle') {
         await this.otherArticles()
@@ -116,25 +116,19 @@ export class KompasWidgetRecirculationsDefault extends LitElement {
       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'
+    const kompasApiCdsSPA = 'https://cds.kompas.id/api/v2'
 
     // 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',
       },
     })
@@ -146,7 +140,6 @@ export class KompasWidgetRecirculationsDefault extends LitElement {
       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')
     }

package/src/components/kompasid-widget-recirculations-list/KompasWidgetRecirculationsList.ts

@@ -22,7 +22,6 @@ interface ListItem {
 export class KompasWidgetRecirculationsList extends LitElement {
   @property({ type: String }) widgetTitle = ''
   @property({ type: Array }) articleList: ListItem[] = []
-  @property({ type: String }) accessToken = ''
   @property({ type: String }) apiSlug = ''
 
   @property({ type: Boolean }) isDark = false
@@ -52,46 +51,17 @@ export class KompasWidgetRecirculationsList extends LitElement {
   async connectedCallback() {
     super.connectedCallback()
     try {
-      await this.fetchAccessToken()
       await this.fetchArticles()
     } 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 fetchArticles() {
-    if (!this.accessToken) {
-      throw new Error('Token akses tidak tersedia')
-    }
-
-    const endpoint = `https://cds.kompas.id/api/v1/article/${this.apiSlug}`
+    const endpoint = `https://cds.kompas.id/api/v2/article/${this.apiSlug}`
 
     const response = await fetch(endpoint, {
       headers: {
-        Authorization: `Bearer ${this.accessToken}`,
         'Content-Type': 'application/json',
       },
     })

package/src/utils/getHeaderTheme.ts

@@ -0,0 +1,19 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { cva } from 'class-variance-authority'
+
+let responseData
+
+await fetch('https://cdn-www.kompas.id/global-header/theme.json', {
+  method: 'GET',
+  headers: {
+    'Content-Type': 'application/json',
+  },
+})
+  .then(response => response.json())
+  .then(data => {
+    responseData = data
+  })
+
+export const getHeaderTheme = cva('', {
+  variants: (responseData as any).header,
+})

package/tailwind/tailwind.css

@@ -813,14 +813,6 @@ video {
   height: 4rem;
 }
 
-.h-2 {
-  height: 0.5rem;
-}
-
-.h-2\.5 {
-  height: 0.625rem;
-}
-
 .h-20 {
   height: 5rem;
 }
@@ -910,14 +902,6 @@ video {
   width: 4rem;
 }
 
-.w-2 {
-  width: 0.5rem;
-}
-
-.w-2\.5 {
-  width: 0.625rem;
-}
-
 .w-2\/3 {
   width: 66.666667%;
 }
@@ -926,6 +910,10 @@ video {
   width: 5rem;
 }
 
+.w-3 {
+  width: 0.75rem;
+}
+
 .w-3\/4 {
   width: 75%;
 }

package/tailwind/tailwind.ts

@@ -823,14 +823,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     height: 4rem;
   }
 
-  .h-2 {
-    height: 0.5rem;
-  }
-
-  .h-2\\.5 {
-    height: 0.625rem;
-  }
-
   .h-20 {
     height: 5rem;
   }
@@ -920,14 +912,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     width: 4rem;
   }
 
-  .w-2 {
-    width: 0.5rem;
-  }
-
-  .w-2\\.5 {
-    width: 0.625rem;
-  }
-
   .w-2\\/3 {
     width: 66.666667%;
   }
@@ -936,6 +920,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     width: 5rem;
   }
 
+  .w-3 {
+    width: 0.75rem;
+  }
+
   .w-3\\/4 {
     width: 75%;
   }
@@ -1231,6 +1219,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     white-space: nowrap;
   }
 
+  .break-words {
+    overflow-wrap: break-word;
+  }
+
   .rounded {
     border-radius: 0.25rem;
   }
@@ -1893,6 +1885,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     color: rgb(51 51 51 / var(--tw-text-opacity));
   }
 
+  .text-grey-700 {
+    --tw-text-opacity: 1;
+    color: rgb(0 0 0 / var(--tw-text-opacity));
+  }
+
   .text-orange-400 {
     --tw-text-opacity: 1;
     color: rgb(255 122 0 / var(--tw-text-opacity));