@kompasid/lit-web-components 0.7.3 → 0.7.5

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

@@ -4,13 +4,27 @@ Ini adalah redesign komponen _grace period_ yang digunakan pada [kompas.id](http
 
 ## 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`     |
-
+| Property                       | Attribute                      | Description | Type                    | Default     |             
+| ------------------------------ | ------------------------------ | ----------- | ------------------------| ----------- |
+| `totalGracePeriod`             | `total-grace-period`           |             | `number`                | `0`         |
+| `isColumn`                     | `is-column`                    |             | `boolean`               | `false`     |
+| `isShowButton`                 | `is-show-button`               |             | `boolean`               | `false`     |
+| `subscriptionId`               | `subscription-id`              |             | `string`                | `false`     |
+| `paywall_location`             | `paywall_location`             |             | `string`                | `''`        |
+| `paywall_position`             | `paywall_position`             |             | `number`                | `0`         |
+| `paywall_subscription_id`      | `paywall_subscription_id`      |             | `number`                | `0`         |
+| `paywall_subscription_package` | `paywall_subscription_package` |             | `string`                | `''`        |
+| `paywall_subscription_price`   | `paywall_subscription_price`   |             | `number`                | `0`         |
+| `tracker_content_categories`   | `tracker_content_categories`   |             | `string`                | `''`        |
+| `tracker_content_id`           | `tracker_content_id`           |             | `string`                | `''`        |
+| `tracker_content_title`        | `tracker_content_title`        |             | `string`                | `''`        |
+| `tracker_content_type`         | `tracker_content_type`         |             | `string`                | `''`        |
+| `tracker_metered_wall_balance` | `tracker_metered_wall_balance` |             | `number`                | `0`         |
+| `tracker_metered_wall_type`    | `tracker_metered_wall_type`    |             | `string`                | `''`        |
+| `tracker_page_domain`          | `tracker_page_domain`          |             | `string`                | `''`        |
+| `tracker_page_type`            | `tracker_page_type`            |             | `string`                | `''`        |
+| `tracker_subscription_status`  | `tracker_subscription_status`  |             | `string`                | `''`        |
+| `tracker_user_type`            | `tracker_user_type`            |             | `string`                | `''`        |
 
 ----------------------------------------------
 

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/tailwind/tailwind.css

@@ -845,10 +845,6 @@ video {
   height: 17px;
 }
 
-.h-\[49px\] {
-  height: 49px;
-}
-
 .h-\[68px\] {
   height: 68px;
 }
@@ -870,6 +866,14 @@ video {
   height: max-content;
 }
 
+.h-1\/2 {
+  height: 50%;
+}
+
+.h-3\/4 {
+  height: 75%;
+}
+
 .w-1\/2 {
   width: 50%;
 }
@@ -974,6 +978,10 @@ video {
   width: 100%;
 }
 
+.w-screen {
+  width: 100vw;
+}
+
 .max-w-7xl {
   max-width: 80rem;
 }
@@ -1391,6 +1399,11 @@ video {
   background-color: rgb(255 238 204 / var(--tw-bg-opacity));
 }
 
+.bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(208 13 18 / var(--tw-bg-opacity));
+}
+
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -1401,6 +1414,11 @@ video {
   background-color: rgb(255 220 63 / var(--tw-bg-opacity));
 }
 
+.bg-dark-2 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(56 56 56 / var(--tw-bg-opacity));
+}
+
 .bg-opacity-75 {
   --tw-bg-opacity: 0.75;
 }
@@ -1625,10 +1643,6 @@ video {
   text-align: start;
 }
 
-.text-end {
-  text-align: end;
-}
-
 .font-sans {
   font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
@@ -2016,14 +2030,14 @@ video {
     width: 580px;
   }
 
-  .md\:w-full {
-    width: 100%;
-  }
-
   .md\:w-auto {
     width: auto;
   }
 
+  .md\:w-full {
+    width: 100%;
+  }
+
   .md\:max-w-\[137px\] {
     max-width: 137px;
   }
@@ -2361,26 +2375,21 @@ video {
     padding-right: 0px;
   }
 
-  .lg\:px-20 {
-    padding-left: 5rem;
-    padding-right: 5rem;
-  }
-
   .lg\:px-24 {
     padding-left: 6rem;
     padding-right: 6rem;
   }
 
-  .lg\:py-10 {
-    padding-top: 2.5rem;
-    padding-bottom: 2.5rem;
-  }
-
   .lg\:px-8 {
     padding-left: 2rem;
     padding-right: 2rem;
   }
 
+  .lg\:py-10 {
+    padding-top: 2.5rem;
+    padding-bottom: 2.5rem;
+  }
+
   .lg\:pb-0 {
     padding-bottom: 0px;
   }

package/tailwind/tailwind.ts

@@ -855,10 +855,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     height: 17px;
   }
 
-  .h-\\[49px\\] {
-    height: 49px;
-  }
-
   .h-\\[68px\\] {
     height: 68px;
   }
@@ -880,6 +876,14 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     height: max-content;
   }
 
+  .h-1\\/2 {
+    height: 50%;
+  }
+
+  .h-3\\/4 {
+    height: 75%;
+  }
+
   .w-1\\/2 {
     width: 50%;
   }
@@ -984,6 +988,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     width: 100%;
   }
 
+  .w-screen {
+    width: 100vw;
+  }
+
   .max-w-7xl {
     max-width: 80rem;
   }
@@ -1405,6 +1413,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     background-color: rgb(255 238 204 / var(--tw-bg-opacity));
   }
 
+  .bg-red-500 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(208 13 18 / var(--tw-bg-opacity));
+  }
+
   .bg-white {
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -1415,6 +1428,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     background-color: rgb(255 220 63 / var(--tw-bg-opacity));
   }
 
+  .bg-dark-2 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(56 56 56 / var(--tw-bg-opacity));
+  }
+
   .bg-opacity-75 {
     --tw-bg-opacity: 0.75;
   }
@@ -1639,10 +1657,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     text-align: start;
   }
 
-  .text-end {
-    text-align: end;
-  }
-
   .font-sans {
     font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
       'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
@@ -2043,14 +2057,14 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       width: 580px;
     }
 
-    .md\\:w-full {
-      width: 100%;
-    }
-
     .md\\:w-auto {
       width: auto;
     }
 
+    .md\\:w-full {
+      width: 100%;
+    }
+
     .md\\:max-w-\\[137px\\] {
       max-width: 137px;
     }
@@ -2388,26 +2402,21 @@ 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;
     }
 
-    .lg\\:py-10 {
-      padding-top: 2.5rem;
-      padding-bottom: 2.5rem;
-    }
-
     .lg\\:px-8 {
       padding-left: 2rem;
       padding-right: 2rem;
     }
 
+    .lg\\:py-10 {
+      padding-top: 2.5rem;
+      padding-bottom: 2.5rem;
+    }
+
     .lg\\:pb-0 {
       padding-bottom: 0px;
     }