@kompasid/lit-web-components 0.9.2 → 0.9.4

package/src/components/kompasid-menu-side-bar/KompasMenuSideBar.ts

@@ -93,7 +93,7 @@ export class KompasMenuSideBar extends LitElement {
     TWStyles,
   ]
   @property({ type: Array }) dataExternal: DataExternalLink[] = []
-  // @property({ type: Array }) dataSidebar: DataSideBarLink[] = []
+  @property({ type: Boolean }) isDark = false
 
   async connectedCallback() {
     super.connectedCallback()
@@ -233,10 +233,12 @@ export class KompasMenuSideBar extends LitElement {
       html`
         <div class="flex">
           <div
-            class="py-1 px-2 rounded text-xs"
-            style="position: absolute; top: -22px; right: -24px; display: inline-flex; background-color:#D71920;"
+            class="py-0.5 px-1.5 rounded-full"
+            style="position: relative; display: inline-flex; background-color:#D71920;"
           >
-            <span class="font-normal text-white capitalize">Baru</span>
+            <span class="font-bold font-sans text-xs text-white capitalize"
+              >Baru</span
+            >
           </div>
         </div>
       `
@@ -280,13 +282,21 @@ export class KompasMenuSideBar extends LitElement {
         class="w-fit flex items-center justify-center cursor-pointer relative"
         @click=${this.toggleNavSidebar}
       >
-        <div class="h-4 inline-flex text-brand-1">
+        <div
+          class="h-4 inline-flex ${this.isDark
+            ? 'text-[#FFFFFF]'
+            : 'text-brand-1'}"
+        >
           ${unsafeSVG(getFontAwesomeIcon('fas', 'bars'))}
         </div>
         <span
-          class="font-sans hidden sm:inline ml-2 tracking-wide text-brand-1 font-bold"
-          >Menu</span
+          class="font-sans hidden sm:inline ml-2 tracking-wide font-bold ${this
+            .isDark
+            ? 'text-[#FFFFFF]'
+            : 'text-brand-1'}"
         >
+          Menu
+        </span>
       </div>
       <!-- Side Menu -->
       <nav
@@ -301,7 +311,7 @@ export class KompasMenuSideBar extends LitElement {
           style="width: 312px;"
         >
           <div
-            class="bg-[#e1f0ff] flex flex-col items-center justify-center mb-6 w-full"
+            class="bg-[#FFFFFF] flex flex-col items-center justify-center mb-6 w-full"
           >
             <div
               ref="logo-kompas"
@@ -316,7 +326,7 @@ export class KompasMenuSideBar extends LitElement {
                 />
               </a>
               <span
-                class="bg-[#93c8fd] cursor-pointer flex h-10 items-center justify-center rounded text-base w-10 p-4"
+                class="bg-[#E1F0FF] text-brand-1 cursor-pointer flex h-10 items-center justify-center rounded text-base w-10 p-4"
                 @click=${this.toggleNavSidebar}
               >
                 ${unsafeSVG(getFontAwesomeIcon('fa', 'times'))}
@@ -325,26 +335,34 @@ export class KompasMenuSideBar extends LitElement {
             <div class="flex flex-wrap px-4 w-full">
               ${this.dataExternal.map(
                 item => html`
-                  <a href="${item.url}" class="block w-1/2 no-underline">
-                    <div class="cursor-pointer flex items-center pb-6 w-full">
-                      <div class="flex mr-2">
-                        ${item.icon &&
-                        Array.isArray(item.icon) &&
-                        item.icon.length >= 2
-                          ? unsafeSVG(
-                              getFontAwesomeIcon(item.icon[0], item.icon[1])
-                            )
-                          : ''}
-                      </div>
-                      <span class="font-sans relative text-sm text-brand-1">
-                        ${item.name} ${item.isNew ? this.renderChips() : ''}
+                  <a href="${item.url}" class="flex w-1/2 no-underline">
+                    <div
+                      class="cursor-pointer flex items-center pb-4 w-[312px]"
+                    >
+                      ${item.icon &&
+                      Array.isArray(item.icon) &&
+                      item.icon.length >= 2
+                        ? html`
+                            <div class="flex mr-2 text-brand-1">
+                              ${unsafeSVG(
+                                getFontAwesomeIcon(item.icon[0], item.icon[1])
+                              )}
+                            </div>
+                          `
+                        : ''}
+                      <span class="font-sans relative text-xs text-[#666666]">
+                        ${item.name}
                       </span>
+                      <div class="ml-1">
+                        ${item.isNew ? this.renderChips() : ''}
+                      </div>
                     </div>
                   </a>
                 `
               )}
             </div>
           </div>
+          <div class="border-b border-[#DDD] m-6 "></div>
           <!-- feature -->
           <div class="flex">
             <div class="flex justify-between flex-col">
@@ -361,7 +379,8 @@ export class KompasMenuSideBar extends LitElement {
                       >
                         <div class="flex items-center space-x-3">
                           <span
-                            class="text-xl text-brand-1 w-8 h-8 flex items-center"
+                            class="text-xl text-brand-1 h-8 flex items-center 
+                            ${item.icon === null ? 'w-6' : 'max-w-max w-8'}"
                           >
                             ${item.icon &&
                             Array.isArray(item.icon) &&
@@ -389,7 +408,7 @@ export class KompasMenuSideBar extends LitElement {
                       ${this.hasChildren(item)
                         ? html`
                             <span
-                              class="text-xs bg-[#e1f0ff] flex justify-center items-center rounded my-1 p-4 w-10 h-10 cursor-pointer"
+                              class="text-xs text-brand-1 bg-[#e1f0ff] flex justify-center items-center rounded my-1 p-4 w-10 h-10 cursor-pointer"
                               @click=${(e: Event) => {
                                 e.stopPropagation() // Prevents click from bubbling to parent
                                 this.toggleChildren(item)
@@ -414,7 +433,7 @@ export class KompasMenuSideBar extends LitElement {
                             ${item.children.map(
                               child => html`
                                 <div
-                                  class="flex items-center text-sm text-gray-600 px-4 cursor-pointer transition-all"
+                                  class="flex items-center text-sm text-[#333] px-4 cursor-pointer transition-all"
                                   @click=${() => this.rubricClicked(child)}
                                 >
                                   <div
@@ -451,7 +470,7 @@ export class KompasMenuSideBar extends LitElement {
                   <div class="w-full font-sans">
                     <!-- Parent item -->
                     <div
-                      class="flex items-center justify-between text-sm font-medium text-gray-700 px-4 transition-all cursor-pointer"
+                      class="flex items-center justify-between text-sm font-medium px-4 transition-all cursor-pointer"
                       @click=${(e: Event) => this.rubricClicked(item, e)}
                     >
                       <div
@@ -459,7 +478,7 @@ export class KompasMenuSideBar extends LitElement {
                       >
                         <div class="flex items-center space-x-3">
                           <span
-                            class="text-xl text-brand-1 w-8 h-8 flex items-center"
+                            class="text-xl text-brand-1 max-w-max w-8 h-8 flex items-center"
                           >
                             ${item.icon &&
                             Array.isArray(item.icon) &&
@@ -491,7 +510,7 @@ export class KompasMenuSideBar extends LitElement {
                       ${this.hasChildren(item)
                         ? html`
                             <span
-                              class="text-xs bg-[#e1f0ff] flex justify-center items-center rounded my-1 p-4 w-10 h-10 cursor-pointer"
+                              class="text-xs bg-[#e1f0ff] flex justify-center items-center rounded my-1 p-4 w-10 h-10 cursor-pointer font-bold text-brand-1"
                               @click=${(e: Event) => {
                                 e.stopPropagation() // Prevents click from bubbling to parent
                                 this.toggleChildren(item)
@@ -516,7 +535,7 @@ export class KompasMenuSideBar extends LitElement {
                             ${item.children.map(
                               child => html`
                                 <div
-                                  class="flex items-center text-sm text-gray-600 px-4 cursor-pointer transition-all"
+                                  class="flex items-center text-sm text-[#333] px-4 cursor-pointer transition-all"
                                   @click=${() => this.rubricClicked(child)}
                                 >
                                   <div

package/src/components/kompasid-menu-side-bar/readme.md

@@ -0,0 +1,27 @@
+# kompasid-menu-side-bar
+
+Komponen ini adalah komponen web berbasis LitElement yang digunakan untuk menampilkan Menu Side Bar pada Kompas.id
+
+### Contoh Implementasi
+
+```javascript
+<kompasid-menu-side-bar></kompasid-menu-side-bar> // if theme = primary/default
+<kompasid-menu-side-bar
+    .isDark="true" // if theme = dark/transparent
+></kompasid-menu-side-bar>
+
+```
+
+## Properties
+
+| Property      | Attribute    | Description                                       | Tipe     | Default | Content |
+| -------------| -------------| ----------------------------------------------- | -------- | ------- | ---------------- |
+| `isDark`| `isDark`| Pilihan Tema untuk tampilan Burger Menu.                             | `boolean` | `false`    | `''` |
+
+### Digunakan oleh
+
+- [kompasid-menu-side-bar](../kompasid-menu-side-bar)
+
+## Kontributor
+
+*Dokumentasi ini dibuat oleh tim front-end Kompas.id.*

package/tailwind/tailwind.css

@@ -798,6 +798,14 @@ video {
   margin-top: 2rem;
 }
 
+.ml-\[6px\] {
+  margin-left: 6px;
+}
+
+.ml-1\.5 {
+  margin-left: 0.375rem;
+}
+
 .block {
   display: block;
 }
@@ -1028,10 +1036,23 @@ video {
   width: 100vw;
 }
 
+.w-\[312px\] {
+  width: 312px;
+}
+
+.w-2\.5 {
+  width: 0.625rem;
+}
+
 .max-w-7xl {
   max-width: 80rem;
 }
 
+.max-w-max {
+  max-width: -moz-max-content;
+  max-width: max-content;
+}
+
 .max-w-screen-md {
   max-width: 768px;
 }
@@ -1398,6 +1419,11 @@ video {
   background-color: rgb(147 200 253 / var(--tw-bg-opacity));
 }
 
+.bg-\[\#FFFFFF\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
 .bg-\[\#e1f0ff\] {
   --tw-bg-opacity: 1;
   background-color: rgb(225 240 255 / var(--tw-bg-opacity));
@@ -1508,6 +1534,11 @@ video {
   background-color: rgb(255 220 63 / var(--tw-bg-opacity));
 }
 
+.bg-\[\#E1F0FF\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(225 240 255 / var(--tw-bg-opacity));
+}
+
 .bg-opacity-75 {
   --tw-bg-opacity: 0.75;
 }
@@ -1635,6 +1666,16 @@ video {
   padding-bottom: 5.6px;
 }
 
+.px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+
+.px-1\.5 {
+  padding-left: 0.375rem;
+  padding-right: 0.375rem;
+}
+
 .pb-1 {
   padding-bottom: 0.25rem;
 }
@@ -1986,6 +2027,11 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.text-\[\#666666\] {
+  --tw-text-opacity: 1;
+  color: rgb(102 102 102 / var(--tw-text-opacity));
+}
+
 .underline {
   text-decoration-line: underline;
 }

package/tailwind/tailwind.ts

@@ -808,6 +808,14 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     margin-top: 2rem;
   }
 
+  .ml-\\[6px\\] {
+    margin-left: 6px;
+  }
+
+  .ml-1\\.5 {
+    margin-left: 0.375rem;
+  }
+
   .block {
     display: block;
   }
@@ -1038,10 +1046,23 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     width: 100vw;
   }
 
+  .w-\\[312px\\] {
+    width: 312px;
+  }
+
+  .w-2\\.5 {
+    width: 0.625rem;
+  }
+
   .max-w-7xl {
     max-width: 80rem;
   }
 
+  .max-w-max {
+    max-width: -moz-max-content;
+    max-width: max-content;
+  }
+
   .max-w-screen-md {
     max-width: 768px;
   }
@@ -1412,6 +1433,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     background-color: rgb(147 200 253 / var(--tw-bg-opacity));
   }
 
+  .bg-\\[\\#FFFFFF\\] {
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  }
+
   .bg-\\[\\#e1f0ff\\] {
     --tw-bg-opacity: 1;
     background-color: rgb(225 240 255 / var(--tw-bg-opacity));
@@ -1522,6 +1548,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-\\[\\#E1F0FF\\] {
+    --tw-bg-opacity: 1;
+    background-color: rgb(225 240 255 / var(--tw-bg-opacity));
+  }
+
   .bg-opacity-75 {
     --tw-bg-opacity: 0.75;
   }
@@ -1649,6 +1680,16 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     padding-bottom: 5.6px;
   }
 
+  .px-1 {
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
+  }
+
+  .px-1\\.5 {
+    padding-left: 0.375rem;
+    padding-right: 0.375rem;
+  }
+
   .pb-1 {
     padding-bottom: 0.25rem;
   }
@@ -2003,6 +2044,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     color: rgb(255 255 255 / var(--tw-text-opacity));
   }
 
+  .text-\\[\\#666666\\] {
+    --tw-text-opacity: 1;
+    color: rgb(102 102 102 / var(--tw-text-opacity));
+  }
+
   .underline {
     text-decoration-line: underline;
   }