@kompasid/lit-web-components 0.7.8 → 0.8.0

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

@@ -43,6 +43,8 @@ export class KompasWidgetRecirculationsDefault extends LitElement {
   @property({ type: String }) titleName = '' // contoh: Artikel Terkait / Lainnya dalam 'kategori'
   @property({ type: String }) titleLink = '' // contoh: /kategori/opini
 
+  @property({ type: Boolean }) isDark = false
+
   /**
    * Fetch Data
    */
@@ -172,7 +174,12 @@ export class KompasWidgetRecirculationsDefault extends LitElement {
     return html`
       <div class="flex font-sans uppercase items-start mb-6 mt-8">
         <div>
-          <h5 class="capitalize font-bold font-sans text-grey-600">
+          <h5
+            class="capitalize font-bold font-sans text-lg md:text-xl ${this
+              .isDark
+              ? 'text-white'
+              : 'text-grey-600'}"
+          >
             Artikel Terkait
           </h5>
         </div>
@@ -186,7 +193,11 @@ export class KompasWidgetRecirculationsDefault extends LitElement {
         href="${this.titleLink}"
         class="flex font-sans uppercase items-start mb-6 mt-8"
       >
-        <h5 class="capitalize font-bold font-sans text-brand-1">
+        <h5
+          class="capitalize font-bold font-sans text-lg md:text-xl ${this.isDark
+            ? 'text-blue-200'
+            : 'text-brand-1'}"
+        >
           ${this.titleName}
         </h5>
       </a>
@@ -253,7 +264,7 @@ export class KompasWidgetRecirculationsDefault extends LitElement {
 
   render() {
     return html`
-      <div class="w-full">
+      <div class="w-full ${this.isDark ? 'bg-dark-5 ' : ''}">
         <!-- start: widget title -->
         ${this.type === 'relatedArticle'
           ? this.titleRelatedArticle()
@@ -273,11 +284,18 @@ export class KompasWidgetRecirculationsDefault extends LitElement {
                           <a href="${post.permalink}">
                             ${this.renderChips(post)}
                             <h5
-                              class="hover:underline font-bold font-sans leading-tight text-grey-600"
+                              class="hover:underline font-bold font-sans leading-tight text-lg md:text-xl ${this
+                                .isDark
+                                ? 'text-white'
+                                : 'text-grey-600'}"
                             >
                               ${post.title}
                             </h5>
-                            <p class="text-grey-600 pt-2">
+                            <p
+                              class="font-sans pt-2 text-sm ${this.isDark
+                                ? 'text-white'
+                                : 'text-grey-600'}"
+                            >
                               ${this.formatDate(post.publishedDate)}
                             </p>
                           </a>
@@ -302,11 +320,18 @@ export class KompasWidgetRecirculationsDefault extends LitElement {
                           <a href="${post.permalink}">
                             ${this.renderChips(post)}
                             <h5
-                              class="hover:underline font-bold font-sans leading-tight text-grey-600"
+                              class="hover:underline font-bold font-sans leading-tight text-lg md:text-xl ${this
+                                .isDark
+                                ? 'text-white'
+                                : 'text-grey-600'}"
                             >
                               ${post.title}
                             </h5>
-                            <p class="text-grey-600 pt-2">
+                            <p
+                              class="font-sans pt-2 text-sm ${this.isDark
+                                ? 'text-white'
+                                : 'text-grey-600'}"
+                            >
                               ${this.formatDate(post.publishedDate)}
                             </p>
                           </a>

package/src/components/kompasid-widget-recirculations-list/KompasWidgetRecirculationsList.ts

@@ -25,6 +25,8 @@ export class KompasWidgetRecirculationsList extends LitElement {
   @property({ type: String }) accessToken = ''
   @property({ type: String }) apiSlug = ''
 
+  @property({ type: Boolean }) isDark = false
+
   static styles = [
     css`
       :host {
@@ -190,9 +192,14 @@ export class KompasWidgetRecirculationsList extends LitElement {
 
   render() {
     return html`
-      <div>
+      <div class="${this.isDark ? 'bg-dark-5 ' : ''}">
         <div class="mb-6">
-          <h5 class="capitalize font-bold text-grey-600 font-sans">
+          <h5
+            class="capitalize font-bold font-sans text-lg md:text-xl ${this
+              .isDark
+              ? 'text-white'
+              : 'text-grey-600'}"
+          >
             ${this.widgetTitle}
           </h5>
         </div>
@@ -207,12 +214,18 @@ export class KompasWidgetRecirculationsList extends LitElement {
                       ${this.renderChips(item)}
                       <a
                         href="${item.permalink}"
-                        class="font-bold font-sans hover:underline leading-tight text-base text-grey-600"
+                        class="font-bold font-lora hover:underline leading-normal text-xl ${this
+                          .isDark
+                          ? 'text-white'
+                          : 'text-grey-600'}"
                       >
                         ${item.title}
                       </a>
                       <div
-                        class="flex w-full flex-row items-center leading-normal justify-between text-sm text-grey-500 font-sans pt-2"
+                        class="flex w-full flex-row font-sans items-center leading-normal justify-between pt-2 text-sm ${this
+                          .isDark
+                          ? 'text-white'
+                          : 'text-grey-500'}"
                       >
                         ${item.publishedDate
                           ? this.formatDate(item.publishedDate)

package/tailwind/tailwind.css

@@ -590,10 +590,6 @@ video {
   top: 0px;
 }
 
-.bottom-6 {
-  bottom: 1.5rem;
-}
-
 .z-0 {
   z-index: 0;
 }
@@ -657,16 +653,6 @@ video {
   margin-bottom: 1.5rem;
 }
 
-.my-2 {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-
-.my-3 {
-  margin-top: 0.75rem;
-  margin-bottom: 0.75rem;
-}
-
 .-ml-2 {
   margin-left: -0.5rem;
 }
@@ -1008,14 +994,6 @@ video {
   max-width: 20rem;
 }
 
-.max-w-lg {
-  max-width: 32rem;
-}
-
-.max-w-md {
-  max-width: 28rem;
-}
-
 .flex-none {
   flex: none;
 }
@@ -1679,6 +1657,11 @@ video {
   line-height: 1.25rem;
 }
 
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
 .text-xs {
   font-size: 0.75rem;
   line-height: 1rem;
@@ -1759,6 +1742,11 @@ video {
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
+.text-blue-200 {
+  --tw-text-opacity: 1;
+  color: rgb(147 200 253 / var(--tw-text-opacity));
+}
+
 .text-blue-300 {
   --tw-text-opacity: 1;
   color: rgb(90 171 252 / var(--tw-text-opacity));
@@ -1907,6 +1895,11 @@ video {
     margin-right: 0px;
   }
 
+  .md\:my-3 {
+    margin-top: 0.75rem;
+    margin-bottom: 0.75rem;
+  }
+
   .md\:my-8 {
     margin-top: 2rem;
     margin-bottom: 2rem;
@@ -1917,16 +1910,6 @@ video {
     margin-bottom: auto;
   }
 
-  .md\:my-3 {
-    margin-top: 0.75rem;
-    margin-bottom: 0.75rem;
-  }
-
-  .md\:my-10 {
-    margin-top: 2.5rem;
-    margin-bottom: 2.5rem;
-  }
-
   .md\:mb-0 {
     margin-bottom: 0px;
   }
@@ -1951,6 +1934,14 @@ video {
     margin-top: 0px;
   }
 
+  .md\:mt-2 {
+    margin-top: 0.5rem;
+  }
+
+  .md\:mt-2\.5 {
+    margin-top: 0.625rem;
+  }
+
   .md\:mt-3 {
     margin-top: 0.75rem;
   }
@@ -1963,22 +1954,6 @@ video {
     margin-top: 2rem;
   }
 
-  .md\:mt-2 {
-    margin-top: 0.5rem;
-  }
-
-  .md\:mt-1 {
-    margin-top: 0.25rem;
-  }
-
-  .md\:mt-10 {
-    margin-top: 2.5rem;
-  }
-
-  .md\:mt-2\.5 {
-    margin-top: 0.625rem;
-  }
-
   .md\:block {
     display: block;
   }
@@ -2076,6 +2051,10 @@ video {
     max-width: 200px;
   }
 
+  .md\:max-w-\[464px\] {
+    max-width: 464px;
+  }
+
   .md\:max-w-full {
     max-width: 100%;
   }
@@ -2084,10 +2063,6 @@ video {
     max-width: 24rem;
   }
 
-  .md\:max-w-\[464px\] {
-    max-width: 464px;
-  }
-
   .md\:grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
@@ -2154,18 +2129,18 @@ video {
     margin-bottom: calc(0px * var(--tw-space-y-reverse));
   }
 
-  .md\:space-y-4 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-y-reverse: 0;
-    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
-    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
-  }
-
   .md\:space-y-1 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-y-reverse: 0;
     margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
     margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
   }
 
+  .md\:space-y-4 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-y-reverse: 0;
+    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+  }
+
   .md\:self-start {
     align-self: flex-start;
   }
@@ -2235,11 +2210,6 @@ video {
     padding-bottom: 0.5rem;
   }
 
-  .md\:py-6 {
-    padding-top: 1.5rem;
-    padding-bottom: 1.5rem;
-  }
-
   .md\:py-3 {
     padding-top: 0.75rem;
     padding-bottom: 0.75rem;
@@ -2250,14 +2220,9 @@ video {
     padding-bottom: 0.875rem;
   }
 
-  .md\:py-4 {
-    padding-top: 1rem;
-    padding-bottom: 1rem;
-  }
-
-  .md\:py-10 {
-    padding-top: 2.5rem;
-    padding-bottom: 2.5rem;
+  .md\:py-6 {
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
   }
 
   .md\:pb-4 {
@@ -2276,24 +2241,12 @@ video {
     padding-top: 0.75rem;
   }
 
-  .md\:pt-8 {
-    padding-top: 2rem;
-  }
-
-  .md\:pt-4 {
-    padding-top: 1rem;
-  }
-
-  .md\:pt-2 {
-    padding-top: 0.5rem;
-  }
-
   .md\:pt-5 {
     padding-top: 1.25rem;
   }
 
-  .md\:pt-6 {
-    padding-top: 1.5rem;
+  .md\:pt-8 {
+    padding-top: 2rem;
   }
 
   .md\:text-left {
@@ -2369,14 +2322,6 @@ video {
     margin-top: 0px;
   }
 
-  .lg\:mt-2 {
-    margin-top: 0.5rem;
-  }
-
-  .lg\:mt-1 {
-    margin-top: 0.25rem;
-  }
-
   .lg\:block {
     display: block;
   }
@@ -2480,12 +2425,6 @@ video {
 }
 
 @media (min-width: 1280px) {
-  .xl\:space-y-1 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-y-reverse: 0;
-    margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
-    margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
-  }
-
   .xl\:px-0 {
     padding-left: 0px;
     padding-right: 0px;