@kompasid/lit-web-components 0.7.1 → 0.7.3

package/src/components/kompasid-grace-period/readme.md

@@ -0,0 +1,17 @@
+# kompasid-grace-period
+
+Ini adalah redesign komponen _grace period_ yang digunakan pada [kompas.id](https://kompas.id).
+
+## Properties
+
+| Property                       | Attribute                      | Description | Type                                        | Default     |             
+| ------------------------------ | ------------------------------ | ----------- | ------------------------------------------- | ----------- |
+| `totalGracePeriod`             | `total-grace-period`           | how many days are left in grace period                    | `number`    | `0`         |
+| `isColumn`                     | `is-column`                    | changes how the component looks on different screen sizes | `boolean`   | `false`     |
+| `isShowButton`                 | `is-show-button`               | shows or hides a subscription button                      | `boolean`   | `false`     |
+| `subscriptionId`               | `subscription-id`              | used for renewal subs                                     | `string`    | `false`     |
+
+
+----------------------------------------------
+
+*Terbikin oleh tim front-end kompas.id*

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
-}

package/src/index.ts

@@ -7,6 +7,7 @@ export { KompasMeteredPaywall } from './components/kompasid-metered-paywall/Komp
 export { KompasFreewall } from './components/kompasid-freewall/KompasFreewall.js'
 export { KompasMeteredWallRegister } from './components/kompasid-metered-wall-register/KompasMeteredWallRegister.js'
 export { KompasHeaderAccount } from './components/kompasid-header-account/KompasHeaderAccount.js'
+export { KompasGracePeriod } from './components/kompasid-grace-period/KompasGracePeriod.js'
 
 declare global {
   interface Window {

package/tailwind/tailwind.css

@@ -974,14 +974,6 @@ video {
   width: 100%;
 }
 
-.w-\[165px\] {
-  width: 165px;
-}
-
-.min-w-\[165px\] {
-  min-width: 165px;
-}
-
 .max-w-7xl {
   max-width: 80rem;
 }
@@ -1002,10 +994,6 @@ video {
   max-width: 20rem;
 }
 
-.max-w-\[165px\] {
-  max-width: 165px;
-}
-
 .flex-none {
   flex: none;
 }
@@ -1470,6 +1458,11 @@ video {
   padding-right: 1rem;
 }
 
+.px-5 {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+
 .px-8 {
   padding-left: 2rem;
   padding-right: 2rem;
@@ -1520,11 +1513,6 @@ video {
   padding-bottom: 5.6px;
 }
 
-.px-5 {
-  padding-left: 1.25rem;
-  padding-right: 1.25rem;
-}
-
 .pb-1 {
   padding-bottom: 0.25rem;
 }
@@ -2004,6 +1992,10 @@ video {
     width: 13rem;
   }
 
+  .md\:w-\[165px\] {
+    width: 165px;
+  }
+
   .md\:w-\[350px\] {
     width: 350px;
   }
@@ -2032,10 +2024,6 @@ video {
     width: auto;
   }
 
-  .md\:w-\[165px\] {
-    width: 165px;
-  }
-
   .md\:max-w-\[137px\] {
     max-width: 137px;
   }
@@ -2100,6 +2088,12 @@ video {
     margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
   }
 
+  .md\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(1rem * var(--tw-space-x-reverse));
+    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+  }
+
   .md\:space-x-5 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-x-reverse: 0;
     margin-right: calc(1.25rem * var(--tw-space-x-reverse));
@@ -2200,6 +2194,10 @@ video {
     padding-bottom: 1.75rem;
   }
 
+  .md\:pt-0 {
+    padding-top: 0px;
+  }
+
   .md\:pt-3 {
     padding-top: 0.75rem;
   }
@@ -2363,6 +2361,11 @@ video {
     padding-right: 0px;
   }
 
+  .lg\:px-20 {
+    padding-left: 5rem;
+    padding-right: 5rem;
+  }
+
   .lg\:px-24 {
     padding-left: 6rem;
     padding-right: 6rem;
@@ -2373,6 +2376,11 @@ video {
     padding-bottom: 2.5rem;
   }
 
+  .lg\:px-8 {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+
   .lg\:pb-0 {
     padding-bottom: 0px;
   }

package/tailwind/tailwind.ts

@@ -984,14 +984,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     width: 100%;
   }
 
-  .w-\\[165px\\] {
-    width: 165px;
-  }
-
-  .min-w-\\[165px\\] {
-    min-width: 165px;
-  }
-
   .max-w-7xl {
     max-width: 80rem;
   }
@@ -1012,10 +1004,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     max-width: 20rem;
   }
 
-  .max-w-\\[165px\\] {
-    max-width: 165px;
-  }
-
   .flex-none {
     flex: none;
   }
@@ -1484,6 +1472,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     padding-right: 1rem;
   }
 
+  .px-5 {
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
+  }
+
   .px-8 {
     padding-left: 2rem;
     padding-right: 2rem;
@@ -1534,11 +1527,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     padding-bottom: 5.6px;
   }
 
-  .px-5 {
-    padding-left: 1.25rem;
-    padding-right: 1.25rem;
-  }
-
   .pb-1 {
     padding-bottom: 0.25rem;
   }
@@ -2031,6 +2019,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       width: 13rem;
     }
 
+    .md\\:w-\\[165px\\] {
+      width: 165px;
+    }
+
     .md\\:w-\\[350px\\] {
       width: 350px;
     }
@@ -2059,10 +2051,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       width: auto;
     }
 
-    .md\\:w-\\[165px\\] {
-      width: 165px;
-    }
-
     .md\\:max-w-\\[137px\\] {
       max-width: 137px;
     }
@@ -2127,6 +2115,12 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
     }
 
+    .md\\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
+      --tw-space-x-reverse: 0;
+      margin-right: calc(1rem * var(--tw-space-x-reverse));
+      margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+    }
+
     .md\\:space-x-5 > :not([hidden]) ~ :not([hidden]) {
       --tw-space-x-reverse: 0;
       margin-right: calc(1.25rem * var(--tw-space-x-reverse));
@@ -2227,6 +2221,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       padding-bottom: 1.75rem;
     }
 
+    .md\\:pt-0 {
+      padding-top: 0px;
+    }
+
     .md\\:pt-3 {
       padding-top: 0.75rem;
     }
@@ -2390,6 +2388,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       padding-right: 0px;
     }
 
+    .lg\\:px-20 {
+      padding-left: 5rem;
+      padding-right: 5rem;
+    }
+
     .lg\\:px-24 {
       padding-left: 6rem;
       padding-right: 6rem;
@@ -2400,6 +2403,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       padding-bottom: 2.5rem;
     }
 
+    .lg\\:px-8 {
+      padding-left: 2rem;
+      padding-right: 2rem;
+    }
+
     .lg\\:pb-0 {
       padding-bottom: 0px;
     }