feat: implemented checkbox

Kotlin · Aug 30, 2024 · 07f5aa6 · 07f5aa6
1 parent 063ed37
commit 07f5aa6
Show file tree

Hide file tree

Showing 13 changed files with 85 additions and 74 deletions.
diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/_assets/checkbox-off.svg b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/_assets/checkbox-off.svg
diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/_assets/checkbox-on.svg b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/_assets/checkbox-on.svg
diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/checkbox/styles.scss b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/checkbox/styles.scss
@@ -8,15 +8,35 @@
 
   display: inline-block;
 
-  width: 18px;
-  height: 18px;
-
   cursor: pointer;
 
-  input[type='checkbox'] {
-    width: 0;
-    height: 0;
+  &--input {
+    position: absolute;
+    appearance: none;
+
+    visibility: hidden;
+  }
+
+  &--icon {
+    position: absolute;
+
+    width: var(--size-m1);
+    height: var(--size-m1);
+
+    margin-left: calc(-1 * var(--size-m2));
+
+    background-image: url('../_assets/checkbox-off.svg');
+  }
+
+  &--input:checked + &--icon {
+    background-image: url('../_assets/checkbox-on.svg');
+  }
+
+  &--input:disabled + &--icon {
+    opacity: 0.2;
+  }
 
-    opacity: 0;
+  &--input:focus-visible {
+    outline: 4px solid var(--color-key-blue-05);
   }
 }
diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/dropdown/dropdown.stories.ftl b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/dropdown/dropdown.stories.ftl
@@ -6,15 +6,22 @@
                 aria-expanded="false"
         ></button>
         <ul role="listbox" id="id-of-listbox" class="dropdown--list">
-                <li role="option" class="dropdown--option"  tabindex="0">
-                    <input type="checkbox" class="checkbox dropdown--checkbox" id="option-1" tabindex="-1"/>
-                    Option 1
-                </li>
-                <li role="option" class="dropdown--option"  tabindex="0">
-                    <input type="checkbox" class="checkbox dropdown--checkbox" id="option-2" tabindex="-1"/>
-                    Option 2
-                </li>
-            </#list>
+            <li role="option" class="dropdown--option" onclick="onToggleOption(event)"
+                onkeyup="onToggleOptionByKey(event)" tabindex="0">
+                <label class="checkbox">
+                    <input type="checkbox" checked class="checkbox--input" id="1"/>
+                    <span class="checkbox--icon"></span>
+                    First
+                </label>
+            </li>
+            <li role="option" class="dropdown--option" onclick="onToggleOption(event)"
+                onkeyup="onToggleOptionByKey(event)" tabindex="0">
+                <label class="checkbox">
+                    <input type="checkbox" disabled class="checkbox--input" id="2"/>
+                    <span class="checkbox--icon"></span>
+                    Second
+                </label>
+            </li>
         </ul>
     </div>
 </#macro>
diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/dropdown/index.ts b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/dropdown/index.ts
@@ -53,14 +53,14 @@ document.addEventListener('DOMContentLoaded', () => {
 function onToggleOption(event: PointerEvent): void {
   const target = event.target as HTMLButtonElement;
   target.classList.toggle('dropdown--option_active');
-  target.querySelector('.dropdown--checkbox')?.toggleAttribute('checked');
+  target.querySelector('.checkbox--input')?.toggleAttribute('checked');
 }
 
 function onToggleOptionByKey(event: KeyboardEvent): void {
   const target = event.target as HTMLButtonElement;
   if (event.key === 'Enter' || event.key === ' ') {
     target.classList.toggle('dropdown--option_active');
-    target.querySelector('.dropdown--checkbox')?.toggleAttribute('checked');
+    target.querySelector('.checkbox--input')?.toggleAttribute('checked');
   }
 }
 

diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/dropdown/styles.scss b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/dropdown/styles.scss
@@ -24,7 +24,7 @@
     min-width: 272px;
     max-width: 360px;
     max-height: 400px;
-    padding: 0;
+    padding: 12px 0;
 
     border: 1px solid lighten(rgb(50, 50, 55), 15%); // color-background-nav-dt
     background-color: var(--color-background-nav-dt);
@@ -88,16 +88,4 @@
       }
     }
   }
-
-  &--checkbox {
-    position: absolute;
-
-    top: 50%;
-
-    left: 12px;
-
-    margin-top: -9px;
-
-    pointer-events: none;
-  }
 }
diff --git a/.../plugin-base/src/main/kotlin/org/jetbrains/dokka/base/renderers/html/htmlPreprocessors.kt b/.../plugin-base/src/main/kotlin/org/jetbrains/dokka/base/renderers/html/htmlPreprocessors.kt
@@ -107,6 +107,8 @@ public object AssetsInstaller : PageTransformer {
         // ui-kit assets
         "ui-kit/assets/arrow-down.svg",
         "ui-kit/assets/burger.svg",
+        "ui-kit/assets/checkbox-off.svg",
+        "ui-kit/assets/checkbox-on.svg",
         "ui-kit/assets/homepage.svg",
         "ui-kit/assets/theme-toggle.svg",
         "ui-kit/assets/placeholder.svg",

diff --git a/...bprojects/plugin-base/src/main/resources/dokka/templates/includes/source_set_selector.ftl b/...bprojects/plugin-base/src/main/resources/dokka/templates/includes/source_set_selector.ftl
@@ -5,14 +5,6 @@
                 <button class="platform-tag platform-selector ${ss.platform}-like" data-active=""
                         data-filter="${ss.filter}">${ss.name}</button>
             </#list>
-            <#list sourceSets as ss>
-                <button class="platform-tag platform-selector ${ss.platform}-like" data-active=""
-                        data-filter="${ss.filter}">2 ${ss.name}</button>
-            </#list>
-            <#list sourceSets as ss>
-                <button class="platform-tag platform-selector ${ss.platform}-like" data-active=""
-                        data-filter="${ss.filter}">3 ${ss.name}</button>
-            </#list>
             <div class="dropdown" data-role="dropdown" id="filter-section-dropdown">
                 <button class="button button_dropdown filter-section--dropdown-toggle" role="combobox"
                         data-role="dropdown-toggle"
@@ -30,25 +22,12 @@
                     <#list sourceSets as ss>
                         <li role="option" class="dropdown--option" onclick="onToggleOption(event)"
                             onkeyup="onToggleOptionByKey(event)" tabindex="0">
-                            <input type="checkbox" class="checkbox dropdown--checkbox" id="${ss.filter}"
-                                   data-filter="${ss.filter}" tabindex="-1"/>
-                            ${ss.name}
-                        </li>
-                    </#list>
-                    <#list sourceSets as ss>
-                        <li role="option" class="dropdown--option" onclick="onToggleOption(event)"
-                            onkeyup="onToggleOptionByKey(event)" tabindex="0">
-                            <input type="checkbox" class="checkbox dropdown--checkbox" id="1${ss.filter}"
-                                   data-filter="${ss.filter}" tabindex="-1"/>
-                            2 ${ss.name}
-                        </li>
-                    </#list>
-                    <#list sourceSets as ss>
-                        <li role="option" class="dropdown--option" onclick="onToggleOption(event)"
-                            onkeyup="onToggleOptionByKey(event)" tabindex="0">
-                            <input type="checkbox" class="checkbox dropdown--checkbox" id="2${ss.filter}"
-                                   data-filter="${ss.filter}" tabindex="-1"/>
-                            3 ${ss.name}
+                            <label class="checkbox">
+                                <input type="checkbox" class="checkbox--input" id="${ss.filter}"
+                                       data-filter="${ss.filter}"/>
+                                <span class="checkbox--icon"></span>
+                                ${ss.name}
+                            </label>
                         </li>
                     </#list>
                 </ul>

diff --git a/...subprojects/plugin-base/src/main/resources/dokka/ui-kit/assets/checkbox-off.svg b/...subprojects/plugin-base/src/main/resources/dokka/ui-kit/assets/checkbox-off.svg
diff --git a/...-subprojects/plugin-base/src/main/resources/dokka/ui-kit/assets/checkbox-on.svg b/...-subprojects/plugin-base/src/main/resources/dokka/ui-kit/assets/checkbox-on.svg
diff --git a/dokka-subprojects/plugin-base/src/main/resources/dokka/ui-kit/ui-kit.css b/dokka-subprojects/plugin-base/src/main/resources/dokka/ui-kit/ui-kit.css
@@ -284,10 +284,21 @@
   cursor: pointer;
 }
 
-.checkbox input[type=checkbox] {
-  width: 0;
-  height: 0;
-  opacity: 0;
+.checkbox:checked {
+  background-image: url(assets/checkbox-on.svg);
+}
+
+.checkbox--input {
+  position: absolute;
+  appearance: none;
+}
+
+.checkbox--icon {
+  position: absolute;
+  width: var(--size-m1);
+  height: var(--size-m1);
+  margin-left: calc(-1 * var(--size-m2));
+  background-image: url(assets/checkbox-off.svg);
 }
 /*!
  * Copyright 2014-2024  JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
@@ -399,7 +410,7 @@
   min-width: 272px;
   max-width: 360px;
   max-height: 400px;
-  padding: 0;
+  padding: 12px 0;
   border: 1px solid #56565f;
   background-color: var(--color-background-nav-dt);
   box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2509803922);
@@ -453,14 +464,6 @@
 .dropdown--option_active:hover {
   background-color: #639fff;
 }
-
-.dropdown--checkbox {
-  position: absolute;
-  top: 50%;
-  left: 12px;
-  margin-top: -9px;
-  pointer-events: none;
-}
 /*!
  * Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
  */ /*!