@kompasid/lit-web-components 0.1.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/.github/workflows/npm-publish.yml +6 -6
  2. package/README.md +44 -13
  3. package/assets/kompas-icon.svg +362 -0
  4. package/demo/index.html +2 -0
  5. package/dist/assets/font-awesome.d.ts +2 -2
  6. package/dist/src/components/kompas-footer/KompasFooter.d.ts +1 -1
  7. package/dist/src/components/kompas-footer/KompasFooter.js +1 -1
  8. package/dist/src/components/kompas-footer/KompasFooter.js.map +1 -1
  9. package/dist/src/components/kompas-metered-paywall/KompasMeteredPaywall.d.ts +1 -1
  10. package/dist/src/components/kompas-metered-paywall/KompasMeteredPaywall.js +1 -1
  11. package/dist/src/components/kompas-metered-paywall/KompasMeteredPaywall.js.map +1 -1
  12. package/dist/src/components/kompas-paywall/KompasPaywall.d.ts +1 -1
  13. package/dist/src/components/kompas-paywall/KompasPaywall.js.map +1 -1
  14. package/dist/src/components/kompas-paywall-banner-registration/KompasPaywallBannerRegistration.d.ts +2 -1
  15. package/dist/src/components/kompas-paywall-banner-registration/KompasPaywallBannerRegistration.js +9 -2
  16. package/dist/src/components/kompas-paywall-banner-registration/KompasPaywallBannerRegistration.js.map +1 -1
  17. package/dist/src/components/kompas-paywall-body/KompasPaywallBody.d.ts +1 -1
  18. package/dist/src/components/kompas-paywall-body/KompasPaywallBody.js +17 -11
  19. package/dist/src/components/kompas-paywall-body/KompasPaywallBody.js.map +1 -1
  20. package/dist/src/components/kompas-paywall-information-header/KompasPaywallInformationHeader.d.ts +1 -1
  21. package/dist/src/components/kompas-paywall-information-header/KompasPaywallInformationHeader.js.map +1 -1
  22. package/dist/src/components/kompas-paywall-video/KompasPaywallVideo.d.ts +2 -4
  23. package/dist/src/components/kompas-paywall-video/KompasPaywallVideo.js +7 -12
  24. package/dist/src/components/kompas-paywall-video/KompasPaywallVideo.js.map +1 -1
  25. package/dist/tailwind/tailwind.js +1343 -1368
  26. package/dist/tailwind/tailwind.js.map +1 -1
  27. package/dist/tsconfig.tsbuildinfo +1 -1
  28. package/package.json +3 -3
  29. package/pull_request_template.md +9 -0
  30. package/src/components/kompas-footer/KompasFooter.ts +1 -1
  31. package/src/components/kompas-metered-paywall/KompasMeteredPaywall.ts +1 -1
  32. package/src/components/kompas-metered-paywall/readme.md +19 -25
  33. package/src/components/kompas-paywall/readme.md +0 -111
  34. package/src/components/kompas-paywall-banner-registration/KompasPaywallBannerRegistration.ts +10 -2
  35. package/src/components/kompas-paywall-banner-registration/readme.md +0 -5
  36. package/src/components/kompas-paywall-body/KompasPaywallBody.ts +18 -10
  37. package/src/components/kompas-paywall-body/readme.md +0 -5
  38. package/src/components/kompas-paywall-information-header/readme.md +0 -5
  39. package/src/components/kompas-paywall-video/KompasPaywallVideo.ts +7 -6
  40. package/src/components/kompas-paywall-video/readme.md +17 -21
  41. package/tailwind/tailwind.css +0 -9
  42. package/tailwind/tailwind.ts +1344 -1368
  43. package/tsconfig.json +1 -0
package/src/components/kompas-paywall/readme.md CHANGED
@@ -2,117 +2,6 @@
2
2
 
3
3
  Ini adalah redesign komponen _paywall_ yang digunakan pada [epaper.kompas.id](https://epaper.kompas.id) dan [kompas.id](https://kompas.id). Penggunaan komponen ini dapat dibedakan berdasarkan type productnya ( epaper atau reguler(kompas.id)).
4
4
 
5
- ## Pemasangan
6
-
7
- ### - CDN
8
-
9
- Selalu menggunakan versi terbaru:
10
- ```html
11
- <script src="https://unpkg.com/@kompasid/web-components@latest" type="module" async defer></script>
12
- ```
13
- atau menggunakan versi tertentu, saat ini belum disarankan:
14
- ```html
15
- <script src="https://unpkg.com/@kompasid/web-components@0.0.1-alpha-5" type="module" async defer></script>
16
- ```
17
-
18
- ### - NPM
19
- ```bash
20
- npm i -D @kompasid/web-components
21
- ```
22
-
23
- ### - Yarn
24
- ```bash
25
- yarn add -D @kompasid/web-components
26
- ```
27
-
28
- ## Penggunaan
29
-
30
- ### - Vue.js
31
- Apabila menggunakan Vue.js sebagai kerangka kerja Javascript, Anda perlu menambahkan konfigurasi berikut di `./src/main.js`:
32
-
33
- ```javascript
34
- import Vue from "vue";
35
- import App from "./App.vue";
36
-
37
- import {
38
- applyPolyfills,
39
- defineCustomElements,
40
- } from "@kompasid/web-components/loader";
41
-
42
- Vue.config.productionTip = false;
43
-
44
- // Perintahkan Vue untuk mengabaikan komponen dengan prefiks 'kompas-'
45
- Vue.config.ignoredElements = [/kompas-\w*/];
46
-
47
- // Bebat komponen kustom ke obyek window
48
- applyPolyfills().then(() => {
49
- defineCustomElements();
50
- });
51
-
52
- new Vue({
53
- render: (h) => h(App),
54
- }).$mount("#app");
55
- ```
56
-
57
- ### - NuxtJS
58
- Apabila menggunakan NuxtJS, Anda bisa menggunakan pustaka [Gomah/nuxt-stencil](https://github.com/Gomah/nuxt-stencil). Tugas selanjutnya adalah menambahkan konfigurasi berikut di `nuxt.config.js`:
59
-
60
- ```javascript
61
- export default {
62
- modules: [
63
- 'nuxt-stencil'
64
- ],
65
- stencil: {
66
- lib: '@kompasid/web-components',
67
- prefix: 'kompas-',
68
- renderOptions: {},
69
- hydratePath: '@kompasid/web-components/hydrate',
70
- loaderPath: '@kompasid/web-components/loader',
71
- ignoredElements: null
72
- },
73
- }
74
- ```
75
-
76
- ### Standar
77
- Anda perlu meletakkan _tag_ komponen `<kompas-paywall />` pada halaman anda.
78
-
79
- Contoh:
80
-
81
- <img width="500" alt="" src="https://i.ibb.co/BwdhYsJ/Screenshot-2022-04-07-151048.png">
82
-
83
-
84
- ### Elemen
85
- ```javascript
86
- <kompas-paywall
87
- type="reguler"
88
- is-with-header="true"
89
- header-text="this is defult text message"
90
- />
91
- ```
92
-
93
- ### Catatan
94
-
95
- Kompas Paywall ini terdiri dari beberapa sub-komponen sebagai berikut :
96
-
97
- 1. kompas-paywall-body <br>
98
- sub-komponen ini merupakan bagian paywall body yang memiliki dua tipe yaitu _epaper_ dan _reguler_
99
- <br>
100
- * epaper <br>
101
- <img width="300" src="https://user-images.githubusercontent.com/43400392/162157850-b82cd11a-a15e-4a44-9f7e-b5b9bab62ee9.png">
102
- * reguler <br>
103
- <img width="300" src="https://user-images.githubusercontent.com/43400392/162159351-9dbef0ce-0113-4cbb-a8a6-9709fbaf1974.png">
104
-
105
- 2. kompas-paywall-banner-registration <br>
106
- sub-komponen ini merupakan komponen banner registration user <br>
107
- <img width="300" src="https://user-images.githubusercontent.com/43400392/162159659-3bbc12ca-78bb-4985-baf6-0df35a5e89a2.png">
108
-
109
- 3. kompas-paywall-information-header <br>
110
- sub-komponen ini merupakan komponen yang digunakan pada mettered paywall ketika mencapai kuota maksimal <br>
111
- <img width="300" src="https://user-images.githubusercontent.com/43400392/162159671-39462ffd-8dd8-4cf5-93ed-fb3bd8751d89.png">
112
-
113
- <!-- Auto Generated Below -->
114
-
115
-
116
5
  ## Properties
117
6
 
118
7
  | Property | Attribute | Description | Type | Default |
package/src/components/kompas-paywall-banner-registration/KompasPaywallBannerRegistration.ts CHANGED
@@ -15,7 +15,7 @@ export class KompasPaywallBannerRegistration extends LitElement {
15
15
  return this.theme === 'dark'
16
16
  }
17
17
 
18
- private redirectToRegister(): void {
18
+ private redirectToLogin(): void {
19
19
  this.sendDataLayer('registrationOfferClick')
20
20
  const loginHost: string = 'https://account.kompas.id/login'
21
21
  const nextParams: string = encodeURIComponent(window.location.href)
@@ -23,6 +23,14 @@ export class KompasPaywallBannerRegistration extends LitElement {
23
23
  window.location.href = directUrlRegister
24
24
  }
25
25
 
26
+ private redirectToRegister(): void {
27
+ this.sendDataLayer('registrationOfferClick')
28
+ const registerHost: string = 'https://account.kompas.id/register'
29
+ const nextParams: string = encodeURIComponent(window.location.href)
30
+ const directUrlRegister: string = `${registerHost}?next=${nextParams}?status=sukses_login&status_login=login&loc=hard_paywall`
31
+ window.location.href = directUrlRegister
32
+ }
33
+
26
34
  private sendDataLayer(value: string): void {
27
35
  window.dataLayer.push({
28
36
  event: value,
@@ -77,7 +85,7 @@ export class KompasPaywallBannerRegistration extends LitElement {
77
85
  <h6 class="${this.isDark && 'text-white'}">
78
86
  Sudah punya akun?
79
87
  <button
80
- @click=${() => this.redirectToRegister()}
88
+ @click=${() => this.redirectToLogin()}
81
89
  class="font-bold ${this.isDark
82
90
  ? 'text-blue-300'
83
91
  : 'text-blue-600'} underline"
package/src/components/kompas-paywall-banner-registration/readme.md CHANGED
@@ -1,10 +1,5 @@
1
1
  # kompas-paywall-banner-registration
2
2
 
3
-
4
-
5
- <!-- Auto Generated Below -->
6
-
7
-
8
3
  ## Properties
9
4
 
10
5
  | Property | Attribute | Description | Type | Default |
package/src/components/kompas-paywall-body/KompasPaywallBody.ts CHANGED
@@ -105,7 +105,8 @@ export class KompasPaywallBody extends LitElement {
105
105
  ): void {
106
106
  this.sendDataLayeronButtonBuyPackage(name, id, price, position)
107
107
  const originHost: string = encodeURIComponent(window.location.href)
108
- const directUrlCheckout: string = url + originHost
108
+ const source: string = this.type === 'epaper' ? 'epaper' : ''
109
+ const directUrlCheckout: string = `${url}${originHost}&source=${source}`
109
110
  window.open(directUrlCheckout)
110
111
  }
111
112
 
@@ -330,16 +331,23 @@ export class KompasPaywallBody extends LitElement {
330
331
  super.connectedCallback()
331
332
  if (this.swgEnable) {
332
333
  this.jsonScript()
333
- if (this.buttonElement) {
334
- const head = document.querySelector('head')
335
- const script = document.createElement('script')
336
- script.src = 'https://news.google.com/swg/js/v1/swg.js'
337
- script.defer = true
338
- script.onload = this.subscribeWithGoogleButton()
339
- if (head) {
340
- head.appendChild(script)
334
+ const appendSWGButton = () => {
335
+ this.buttonElement = this.shadowRoot?.getElementById(
336
+ 'subscribe-with-google'
337
+ ) as HTMLButtonElement
338
+ if (this.buttonElement) {
339
+ const head = document.querySelector('head')
340
+ const script = document.createElement('script')
341
+ script.src = 'https://news.google.com/swg/js/v1/swg.js'
342
+ script.defer = true
343
+ script.onload = this.subscribeWithGoogleButton()
344
+ if (head) {
345
+ head.appendChild(script)
346
+ }
341
347
  }
342
348
  }
349
+
350
+ setTimeout(appendSWGButton, 500)
343
351
  }
344
352
  }
345
353
 
@@ -817,7 +825,7 @@ export class KompasPaywallBody extends LitElement {
817
825
  ${this.swgEnable
818
826
  ? html`<button
819
827
  class="border-2 bg-grey-100 border-grey-100 rounded-lg px-6 shadow-sm flex flex-row py-2 mt-1 mb-4"
820
- ref=${(el: any) => (this.buttonElement = el as HTMLButtonElement)}
828
+ id="subscribe-with-google"
821
829
  >
822
830
  <p>Subscribe with</p>
823
831
  <img class="pl-2 object-scale-down w-20 pt-0.5" src="https://kompasid-production-www.s3.ap-southeast-1.amazonaws.com/paywall-asset/google.png" alt="subscribe with google"></img>
package/src/components/kompas-paywall-body/readme.md CHANGED
@@ -1,10 +1,5 @@
1
1
  # kompas-paywall-body
2
2
 
3
-
4
-
5
- <!-- Auto Generated Below -->
6
-
7
-
8
3
  ## Properties
9
4
 
10
5
  | Property | Attribute | Description | Type | Default |
package/src/components/kompas-paywall-information-header/readme.md CHANGED
@@ -1,10 +1,5 @@
1
1
  # kompas-paywall-information-header
2
2
 
3
-
4
-
5
- <!-- Auto Generated Below -->
6
-
7
-
8
3
  ## Properties
9
4
 
10
5
  | Property | Attribute | Description | Type | Default |
package/src/components/kompas-paywall-video/KompasPaywallVideo.ts CHANGED
@@ -30,10 +30,8 @@ export class KompasPaywallVideo extends LitElement {
30
30
  * prop metered_wall_balance = The balance of their metered wall
31
31
  */
32
32
 
33
- @state() private loginUrl: string = 'https://account.kompas.id/login'
34
33
  @state() private subscriptionUrl: string =
35
34
  'https://www.kompas.id/berlangganan'
36
- @state() private registerUrl: string = 'https://account.kompas.id/register'
37
35
 
38
36
  @property({ type: Boolean }) isLogin = false
39
37
  @property({ type: String }) paywall_location = ''
@@ -87,7 +85,7 @@ export class KompasPaywallVideo extends LitElement {
87
85
  </h5>
88
86
  <div class="flex justify-center mt-4 space-x-3">
89
87
  <button
90
- @click=${() => this.redirectToLogin('Masuk')}
88
+ @click=${() => this.redirectToRegister('Masuk')}
91
89
  class="rounded text-sm text-white px-4 py-1.5 ring-1 ring-grey-100"
92
90
  >
93
91
  Masuk
@@ -104,7 +102,7 @@ export class KompasPaywallVideo extends LitElement {
104
102
  >
105
103
  Dapatkan 5 konten premium gratis tiap bulan!
106
104
  <button
107
- @click=${() => this.redirectToLogin('Coba Sekarang')}
105
+ @click=${() => this.redirectToRegister('Coba Sekarang')}
108
106
  target="_blank"
109
107
  class="text-blue-300 font-bold cursor-pointer"
110
108
  >
@@ -172,9 +170,12 @@ export class KompasPaywallVideo extends LitElement {
172
170
  })
173
171
  }
174
172
 
175
- private redirectToLogin(triggerClick: string): void {
173
+ private redirectToRegister(triggerClick: string): void {
176
174
  this.sendDataLayeronButtonLogin(triggerClick)
177
- window.open(this.loginUrl, '_blank')
175
+ const registerHost: string = 'https://account.kompas.id/register'
176
+ const nextParams: string = encodeURIComponent(window.location.href)
177
+ const directUrlRegister: string = `${registerHost}?next=${nextParams}?status=sukses_login&status_login=login`
178
+ window.open(directUrlRegister, '_blank')
178
179
  }
179
180
 
180
181
  private redirectToBerlangganan(): void {
package/src/components/kompas-paywall-video/readme.md CHANGED
@@ -16,30 +16,26 @@ Contoh Penerapan:
16
16
  <img width="500" src="https://user-images.githubusercontent.com/43400392/198214862-16f0f0b1-d179-48b8-9e30-a7667ede1a95.jpg">
17
17
 
18
18
 
19
- <!-- Auto Generated Below -->
20
-
21
-
22
19
  ## Properties
23
20
 
24
21
  | Property | Attribute | Description | Type | Default |
25
- | ------------------------------ | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
26
- | `isLogin` | `is-login` | prop isLogin untuk menghandle apakah user sudah login atau belum prop paywall_location = The location where user encounter the paywall prop paywall_subscription_package = The name of the subscription package viewed by user prop paywall_subscription_id = The ID of the subscription package viewed by user prop paywall_subscription_price = The price of the subscriprtion package viewed by user prop paywall_position = The position of the subscription package viewed by user prop page_type = Type of the page prop content_id = ID of article (slug) prop content_type = Whether it's free article or paid article prop content_title = The title of article prop tracker_content_categories = The category of the content prop user_type = Type of user based on their subscription prop subscription_status = Status of their subscription prop page_domain = Page Domain prop metered_wall_type = The type of Metered Wall prop metered_wall_balance = The balance of their metered wall | `boolean` | `false` |
27
- | `paywall_location` | `paywall_location` | | `string` | `''` |
28
- | `paywall_position` | `paywall_position` | | `number` | `0` |
29
- | `paywall_subscription_id` | `paywall_subscription_id` | | `string` | `''` |
30
- | `paywall_subscription_package` | `paywall_subscription_package` | | `string` | `''` |
31
- | `paywall_subscription_price` | `paywall_subscription_price` | | `number` | `0` |
32
- | `tracker_content_categories` | `tracker_content_categories` | | `string` | `''` |
33
- | `tracker_content_id` | `tracker_content_id` | | `string` | `''` |
34
- | `tracker_content_title` | `tracker_content_title` | | `string` | `''` |
35
- | `tracker_content_type` | `tracker_content_type` | | `string` | `''` |
36
- | `tracker_metered_wall_balance` | `tracker_metered_wall_balance` | | `number` | `0` |
37
- | `tracker_metered_wall_type` | `tracker_metered_wall_type` | | `string` | `''` |
38
- | `tracker_page_domain` | `tracker_page_domain` | | `string` | `''` |
39
- | `tracker_page_type` | `tracker_page_type` | | `string` | `''` |
40
- | `tracker_subscription_status` | `tracker_subscription_status` | | `string` | `''` |
41
- | `tracker_user_type` | `tracker_user_type` | | `string` | `''` |
42
-
22
+ | ------------------------------ | ------------------------------ | ---------------------------------------------------------------------------------------- | --------- | ------- |
23
+ | `isLogin` | `is-login` | prop isLogin untuk menghandle apakah user sudah login atau belum | `boolean` | `false` |
24
+ | `paywall_location` | `paywall_location` | prop paywall_location = The location where user encounter the paywall | `string` | `''` |
25
+ | `paywall_position` | `paywall_position` | prop paywall_position = The position of the subscription package viewed by user | `number` | `0` |
26
+ | `paywall_subscription_id` | `paywall_subscription_id` | prop paywall_subscription_id = The ID of the subscription package viewed by user | `string` | `''` |
27
+ | `paywall_subscription_package` | `paywall_subscription_package` | prop paywall_subscription_package = The name of the subscription package viewed by user | `string` | `''` |
28
+ | `paywall_subscription_price` | `paywall_subscription_price` | prop paywall_subscription_price = The price of the subscriprtion package viewed by user | `number` | `0` |
29
+ | `tracker_content_categories` | `tracker_content_categories` | prop tracker_content_categories = The category of the content | `string` | `''` |
30
+ | `tracker_content_id` | `tracker_content_id` | prop content_id = ID of article (slug) | `string` | `''` |
31
+ | `tracker_content_title` | `tracker_content_title` | prop content_title = The title of article | `string` | `''` |
32
+ | `tracker_content_type` | `tracker_content_type` | prop content_type = Whether it's free article or paid article | `string` | `''` |
33
+ | `tracker_metered_wall_balance` | `tracker_metered_wall_balance` | prop metered_wall_balance = The balance of their metered wall | `number` | `0` |
34
+ | `tracker_metered_wall_type` | `tracker_metered_wall_type` | prop metered_wall_type = The type of Metered Wall | `string` | `''` |
35
+ | `tracker_page_domain` | `tracker_page_domain` | prop page_domain = Page Domain | `string` | `''` |
36
+ | `tracker_page_type` | `tracker_page_type` | prop page_type = Type of the page | `string` | `''` |
37
+ | `tracker_subscription_status` | `tracker_subscription_status` | prop subscription_status = Status of their subscription | `string` | `''` |
38
+ | `tracker_user_type` | `tracker_user_type` | prop user_type = Type of user based on their subscription | `string` | `''` |
43
39
 
44
40
  ----------------------------------------------
45
41
 
package/tailwind/tailwind.css CHANGED
@@ -700,10 +700,6 @@ video {
700
700
  margin-top: 2rem;
701
701
  }
702
702
 
703
- .block {
704
- display: block;
705
- }
706
-
707
703
  .flex {
708
704
  display: flex;
709
705
  }
@@ -1118,11 +1114,6 @@ video {
1118
1114
  background-color: rgb(255 220 63 / var(--tw-bg-opacity));
1119
1115
  }
1120
1116
 
1121
- .bg-red-100 {
1122
- --tw-bg-opacity: 1;
1123
- background-color: rgb(254 225 207 / var(--tw-bg-opacity));
1124
- }
1125
-
1126
1117
  .bg-opacity-50 {
1127
1118
  --tw-bg-opacity: 0.5;
1128
1119
  }