@kompasid/lit-web-components 0.7.2 → 0.7.4

package/src/components/kompasid-header-account/KompasHeaderAccount.ts

@@ -63,6 +63,31 @@ export class KompasHeaderAccount extends LitElement {
         font-family: 'PT Sans', sans-serif;
         font-size: 0.875rem;
       }
+      .z-index-max {
+        z-index: 99999;
+      }
+
+      /* Custom Scrollbar for header */
+      /* width */
+      ::-webkit-scrollbar {
+        width: 4px;
+      }
+
+      /* Track */
+      ::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      /* Handle */
+      ::-webkit-scrollbar-thumb {
+        background: #0356a8;
+        border-radius: 100px;
+      }
+
+      /* Handle on hover */
+      ::-webkit-scrollbar-thumb:hover {
+        background: #0356a8;
+      }
     `,
     TWStyles,
   ]
@@ -113,7 +138,7 @@ export class KompasHeaderAccount extends LitElement {
     }
 
     return html`
-      <button @click=${this.toggleSidebar} class="cursor-pointer p-3">
+      <button @click=${this.toggleSidebar} class="cursor-pointer ">
         <div class="flex flex-row items-center self-center">
           ${!this.getInitialUserName()
             ? html`<div
@@ -143,11 +168,15 @@ export class KompasHeaderAccount extends LitElement {
 
   private accountSidebar() {
     return html`
-      <nav @keyup="${this.onkeyup}" @click=${this.toggleSidebar}>
+      <nav
+        class="w-screen fixed right-0 top-0 bottom-0"
+        @keyup="${this.onkeyup}"
+        @click=${this.toggleSidebar}
+      >
         <div
+          class="bg-grey-100  pb-20 pt-0 shadow-lg w-76 z-index-max ml-auto"
+          style=${`margin-top: ${this.sidebarTopSpacing}px;height:100vh;overflow-y:auto`}
           @keyup="${this.onkeyup}"
-          class="bg-grey-100 pb-20 pt-0 shadow-lg w-76 z-99 ml-auto"
-          style=${`margin-top: ${this.sidebarTopSpacing}px`}
           @click=${(ev: any) => ev.stopPropagation()}
         >
           <kompasid-header-account-profile
@@ -187,11 +216,7 @@ export class KompasHeaderAccount extends LitElement {
 
   render() {
     return html`
-      <header class="header flex flex-row justify-end h-[49px] relative z-50">
-        <div class="text-end">
-          ${this.account()} ${this.isShowSidebar ? this.accountSidebar() : ''}
-        </div>
-      </header>
+      ${this.account()} ${this.isShowSidebar ? this.accountSidebar() : ''}
     `
   }
 }

package/src/components/kompasid-header-account-help-center/KompasHeaderAccountHelpCenter.ts

@@ -15,23 +15,27 @@ export class KompasHeaderAccountHelpCenter extends LitElement {
         display: flex;
         flex-direction: row;
         align-items: center;
-        padding: 0.75rem;
-        transition: background-color 0.3s ease-in-out;
-        border-radius: 0.25rem;
+        padding: 0 0.75rem;
       }
-      .header-account-help-center--item:hover {
-        background-color: #e5e7eb;
-      }
-      .header-help-center--content {
-        text-align: left;
+      .header-account-help-center--content {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        margin-left: 1rem; /* Equivalent to mx-4 (margin-left: 1rem and margin-right: 1rem) */
+        margin-right: 1rem;
+        line-height: 1.25rem; /* Equivalent to leading-4 (line-height: 1.25rem) */
+        font-size: 1rem; /* Equivalent to text-base (font-size: 1rem) */
+        gap: 0.5rem; /* Equivalent to gap-y-2 (gap between rows: 0.5rem) */
       }
       .icon {
-        width: 20px;
-        height: 20px;
         margin-top: auto;
         margin-bottom: auto;
         color: rgb(0 85 154);
       }
+      .icon svg {
+        width: 20px;
+        height: 20px;
+      }
     `,
     TWStyles,
   ]

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

@@ -40,12 +40,15 @@ export class KompasHeaderAccountMenu extends LitElement {
         width: 1.75rem;
       }
       .icon {
-        width: 20px;
-        height: 20px;
         margin-top: auto;
         margin-bottom: auto;
         color: rgb(0 85 154);
       }
+      .icon svg {
+        width: 20px;
+        height: 20px;
+      }
+      .
     `,
     TWStyles,
   ]

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

@@ -3,7 +3,7 @@ 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'
+import { Post } from './types.js'
 
 @customElement('kompasid-widget-recirculations-default')
 export class KompasWidgetRecirculationsDefault extends LitElement {
@@ -33,7 +33,6 @@ export class KompasWidgetRecirculationsDefault extends LitElement {
    * 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'
@@ -41,13 +40,8 @@ export class KompasWidgetRecirculationsDefault extends LitElement {
   @property({ type: String }) type: 'relatedArticle' | 'otherArticle' =
     'relatedArticle'
   @property({ type: String }) mainCategory = ''
-
-  /**
-   * Getters
-   */
-  get navigationPermalink(): string | undefined {
-    return this.navigation?.permalink
-  }
+  @property({ type: String }) titleName = '' // contoh: Artikel Terkait / Lainnya dalam 'kategori'
+  @property({ type: String }) titleLink = '' // contoh: /kategori/opini
 
   /**
    * Fetch Data
@@ -174,41 +168,31 @@ export class KompasWidgetRecirculationsDefault extends LitElement {
    * 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>
-      `
-    }
-
+  private titleRelatedArticle() {
     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 class="capitalize font-bold font-sans text-grey-600">
+            Artikel Terkait
           </h5>
         </div>
       </div>
     `
   }
 
+  private titleOtherArticle() {
+    return html`
+      <a
+        href="${this.titleLink}"
+        class="flex font-sans uppercase items-start mb-6 mt-8"
+      >
+        <h5 class="capitalize font-bold font-sans text-brand-1">
+          ${this.titleName}
+        </h5>
+      </a>
+    `
+  }
+
   renderChips(post: Post) {
     const chips = []
     const isAnalisis = post.postTag?.some(tag => tag.slug === 'analisis')
@@ -271,7 +255,9 @@ export class KompasWidgetRecirculationsDefault extends LitElement {
     return html`
       <div class="w-full">
         <!-- start: widget title -->
-        ${this.WidgetTitle()}
+        ${this.type === 'relatedArticle'
+          ? this.titleRelatedArticle()
+          : this.titleOtherArticle()}
         <!-- end: widget title -->
 
         <div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">

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

@@ -6,30 +6,24 @@ Komponen ini adalah komponen web berbasis LitElement yang digunakan untuk menamp
 
 ```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'
-  }
+  titleName: 'Lainnya Dalam Opini',
+  titleLink: '/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}
+  .titleName=${widgetOtherPost.titleName}
+  .titleLink=${widgetOtherPost.titleLink}
   type='otherArticle'
   mainCategory='opini'
 ></kompasid-widget-recirculations-default>
@@ -40,7 +34,8 @@ const widgetOtherPost = {
 
 | 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`                                |
+| `titleName`       | `titleName`    | Nama judul yang akan ditampilkan di widget. (Digunakan jika memakai props type=otherArticle)                             | `String`     | `''`                             |
+| `titleLink`       | `titleLink`    | Tautan yang akan ditetapkan pada judul di widget. (Digunakan jika memakai props type=otherArticle)                            | `String`     | `''`                            |
 | `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` | `''`            |                                             |

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

@@ -21,8 +21,3 @@ export interface Post {
     }
   }
 }
-
-export interface Navigation {
-  name: string
-  permalink: string
-}