@kompasid/lit-web-components 0.3.0 → 0.4.0

package/src/components/{kompas-paywall → kompasid-paywall}/readme.md

@@ -1,4 +1,4 @@
-# kompas-paywall
+# kompasid-paywall
 
 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)). 
 
@@ -37,17 +37,17 @@ Ini adalah redesign komponen _paywall_ yang digunakan pada [epaper.kompas.id](ht
 
 ### Depends on
 
-- [kompas-paywall-body](../kompas-paywall-body)
-- [kompas-paywall-information-header](../kompas-paywall-information-header)
-- [kompas-paywall-banner-registration](../kompas-paywall-banner-registration)
+- [kompasid-paywall-body](../kompasid-paywall-body)
+- [kompasid-paywall-information-header](../kompasid-paywall-information-header)
+- [kompasid-paywall-banner-registration](../kompasid-paywall-banner-registration)
 
 ### Graph
 ```mermaid
 graph TD;
-  kompas-paywall --> kompas-paywall-body
-  kompas-paywall --> kompas-paywall-information-header
-  kompas-paywall --> kompas-paywall-banner-registration
-  style kompas-paywall fill:#f9f,stroke:#333,stroke-width:4px
+  kompasid-paywall --> kompasid-paywall-body
+  kompasid-paywall --> kompasid-paywall-information-header
+  kompasid-paywall --> kompasid-paywall-banner-registration
+  style kompasid-paywall fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/src/components/{kompas-paywall-banner-registration → kompasid-paywall-banner-registration}/KompasPaywallBannerRegistration.ts

@@ -1,10 +1,10 @@
 import { html, css, LitElement } from 'lit'
 import { property, customElement } from 'lit/decorators.js'
 import { TWStyles } from '../../../tailwind/tailwind.js'
-import { Registration } from '../kompas-paywall/types.js'
+import { Registration } from '../kompasid-paywall/types.js'
 import { deviceType } from '../../utils/deviceType.js'
 
-@customElement('kompas-paywall-banner-registration')
+@customElement('kompasid-paywall-banner-registration')
 export class KompasPaywallBannerRegistration extends LitElement {
   static styles = [css``, TWStyles]
 

package/src/components/{kompas-paywall-banner-registration → kompasid-paywall-banner-registration}/readme.md

@@ -1,4 +1,4 @@
-# kompas-paywall-banner-registration
+# kompasid-paywall-banner-registration
 
 ## Properties
 
@@ -12,13 +12,13 @@
 
 ### Used by
 
- - [kompas-paywall](../kompas-paywall)
+ - [kompasid-paywall](../kompasid-paywall)
 
 ### Graph
 ```mermaid
 graph TD;
-  kompas-paywall --> kompas-paywall-banner-registration
-  style kompas-paywall-banner-registration fill:#f9f,stroke:#333,stroke-width:4px
+  kompasid-paywall --> kompasid-paywall-banner-registration
+  style kompasid-paywall-banner-registration fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/src/components/{kompas-paywall-body → kompasid-paywall-body}/KompasPaywallBody.ts

@@ -9,13 +9,23 @@ import {
   Product,
   Packages,
   PaymentImage,
-} from '../kompas-paywall/types.js'
+} from '../kompasid-paywall/types.js'
 import { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'
 import { deviceType } from '../../utils/deviceType.js'
 
-@customElement('kompas-paywall-body')
-export class KompasPaywallBody extends LitElement {
-  static styles = [css``, TWStyles]
+@customElement('kompasid-paywall-body')
+export class KompasIdPaywallBody extends LitElement {
+  static styles = [
+    css`
+      .wrapper-body {
+        display: flex;
+        flex-direction: column;
+        justify-items: center;
+        align-items: center;
+      }
+    `,
+    TWStyles,
+  ]
 
   /**
    * Props

package/src/components/{kompas-paywall-body → kompasid-paywall-body}/readme.md

@@ -1,4 +1,4 @@
-# kompas-paywall-body
+# kompasid-paywall-body
 
 ## Properties
 
@@ -35,13 +35,13 @@
 
 ### Used by
 
- - [kompas-paywall](../kompas-paywall)
+ - [kompasid-paywall](../kompasid-paywall)
 
 ### Graph
 ```mermaid
 graph TD;
-  kompas-paywall --> kompas-paywall-body
-  style kompas-paywall-body fill:#f9f,stroke:#333,stroke-width:4px
+  kompasid-paywall --> kompasid-paywall-body
+  style kompasid-paywall-body fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/src/components/{kompas-paywall-information-header → kompasid-paywall-information-header}/KompasPaywallInformationHeader.ts

@@ -3,7 +3,7 @@ import { html, css, LitElement } from 'lit'
 import { property, customElement } from 'lit/decorators.js'
 import { TWStyles } from '../../../tailwind/tailwind.js'
 
-@customElement('kompas-paywall-information-header')
+@customElement('kompasid-paywall-information-header')
 export class KompasPaywallInformationHeader extends LitElement {
   static styles = [css``, TWStyles]
 

package/src/components/{kompas-paywall-information-header → kompasid-paywall-information-header}/readme.md

@@ -1,4 +1,4 @@
-# kompas-paywall-information-header
+# kompasid-paywall-information-header
 
 ## Properties
 
@@ -11,13 +11,13 @@
 
 ### Used by
 
- - [kompas-paywall](../kompas-paywall)
+ - [kompasid-paywall](../kompasid-paywall)
 
 ### Graph
 ```mermaid
 graph TD;
-  kompas-paywall --> kompas-paywall-information-header
-  style kompas-paywall-information-header fill:#f9f,stroke:#333,stroke-width:4px
+  kompasid-paywall --> kompasid-paywall-information-header
+  style kompasid-paywall-information-header fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/src/components/{kompas-paywall-video → kompasid-paywall-video}/KompasPaywallVideo.ts

@@ -4,7 +4,7 @@ import { property, customElement, state } from 'lit/decorators.js'
 import { TWStyles } from '../../../tailwind/tailwind.js'
 import { deviceType } from '../../utils/deviceType.js'
 
-@customElement('kompas-paywall-video')
+@customElement('kompasid-paywall-video')
 export class KompasPaywallVideo extends LitElement {
   static styles = [css``, TWStyles]
 

package/src/components/{kompas-paywall-video → kompasid-paywall-video}/readme.md

@@ -1,13 +1,13 @@
-# kompas-paywall-video
+# kompasid-paywall-video
 
 ### Standar
-Anda perlu meletakkan _tag_ komponen `<kompas-paywall-video />` pada child component (komponen ini memiliki style `position: absolute` sehingga parent componentnya harus menggunakan style `position:relative`).
+Anda perlu meletakkan _tag_ komponen `<kompasid-paywall-video />` pada child component (komponen ini memiliki style `position: absolute` sehingga parent componentnya harus menggunakan style `position:relative`).
 
 ### Elemen
 ```javascript
     <div style="position:relative">  
       <your-content-component/>
-      <kompas-paywall-video />
+      <kompasid-paywall-video />
     </div>
 ```
 

package/src/index.ts

@@ -1,7 +1,7 @@
-export { KompasPaywall } from './components/kompas-paywall/KompasPaywall.js'
-export { KompasFooter } from './components/kompas-footer/KompasFooter.js'
-export { KompasPaywallVideo } from './components/kompas-paywall-video/KompasPaywallVideo.js'
-export { KompasMeteredPaywall } from './components/kompas-metered-paywall/KompasMeteredPaywall.js'
+export { KompasPaywall } from './components/kompasid-paywall/KompasPaywall.js'
+export { KompasFooter } from './components/kompasid-footer/KompasFooter.js'
+export { KompasPaywallVideo } from './components/kompasid-paywall-video/KompasPaywallVideo.js'
+export { KompasMeteredPaywall } from './components/kompasid-metered-paywall/KompasMeteredPaywall.js'
 
 declare global {
   interface Window {

package/tailwind/tailwind.css

@@ -1114,6 +1114,16 @@ video {
   background-color: rgb(255 220 63 / var(--tw-bg-opacity));
 }
 
+.bg-red-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 32 19 / var(--tw-bg-opacity));
+}
+
+.bg-yellow-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 204 0 / var(--tw-bg-opacity));
+}
+
 .bg-opacity-50 {
   --tw-bg-opacity: 0.5;
 }