feat: reworked footer

dokka-integration-tests/gradle/projects/ui-showcase/build-logic/src/main/kotlin/uitest.dokka-kmp.gradle.kts

@@ -13,7 +13,7 @@ tasks.withType<AbstractDokkaTask>().configureEach {
     @Language("JSON")
     val dokkaBaseConfiguration = """
     {
-      "footerMessage": "(c) 2024 My custom footer message",
+      "footerMessage": "<div class='kt-footer__license'>Kotlin™ is protected under the <a href='https://kotlinlang.org/foundation/kotlin-foundation.html' data-test='external-link ' target='_blank' rel='noreferrer noopener' class='kt-footer__link'>Kotlin&nbsp;Foundation</a> and licensed under the&nbsp;<a href='https://github.com/JetBrains/kotlin-web-site/blob/master/LICENSE' data-test='external-link ' target='_blank' rel='noreferrer noopener' class='kt-footer__link'>Apache&nbsp;2 license</a>. </div>",
       "homepageLink": "https://github.com/Kotlin/dokka/tree/master/dokka-integration-tests/gradle/projects/ui-showcase"
     }
     """.trimIndent()

dokka-subprojects/plugin-base-frontend/src/main/ui-kit/button/index.ts

@@ -6,7 +6,7 @@ import './styles.scss';
 function initButton() {
   const buttons = document.querySelectorAll('div.button');
   buttons.forEach((button: Element) => {
-    button.addEventListener('keydown', (event) => {
+    button.addEventListener('keyup', (event) => {
       const key = (event as KeyboardEvent).key;
       if (key === 'Enter' || key === ' ') {
         button.dispatchEvent(new MouseEvent('click'));

dokka-subprojects/plugin-base-frontend/src/main/ui-kit/dropdown/index.ts

@@ -73,7 +73,7 @@ function handleOutsideClick(event: MouseEvent): void {
 
 function addKeyboardNavigation(dropdown: HTMLElement): void {
   new FocusTrap(dropdown);
-  dropdown.addEventListener('keydown', function (event) {
+  dropdown.addEventListener('keyup', function (event) {
     if (event.key === 'Escape') {
       onToggleDropdown(dropdown);
       (dropdown.querySelector(DROPDOWN_TOGGLE) as HTMLElement)?.focus();

dokka-subprojects/plugin-base-frontend/src/main/ui-kit/filter-section/index.ts

@@ -134,7 +134,7 @@ function initFilterSection(): void {
       option.addEventListener('click', (event) => {
         toggleFilterForOption(event.target as Element);
       });
-      option.addEventListener('keydown', (event) => {
+      option.addEventListener('keyup', (event) => {
         const key = (event as KeyboardEvent).key;
         if (key === 'Enter' || key === ' ') {
           toggleFilterForOption(event.target as Element);

dokka-subprojects/plugin-base-frontend/src/main/ui-kit/footer/index.ts

@@ -0,0 +1,4 @@
+/*
+ * Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
+ */
+import './styles.scss';

dokka-subprojects/plugin-base-frontend/src/main/ui-kit/footer/styles.scss

@@ -0,0 +1,120 @@
+/*!
+ * Copyright 2014-2024  JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
+ */
+@import '../_tokens/index';
+
+.footer {
+  position: relative;
+
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+
+  min-height: var(--footer-height);
+  margin-top: auto;
+
+  padding: 0 var(--size-m3);
+
+  letter-spacing: 0.15px;
+
+  color: var(--color-text-light);
+  background-color: var(--color-background-footer);
+
+  font: var(--font-text-s);
+
+  .theme-dark & {
+    color: var(--color-text-light-dt);
+    background-color: var(--color-background-footer-dt);
+  }
+
+  @media (width < $breakpoint-desktop-min) {
+    padding: 0 var(--size-s3);
+  }
+
+  &--button {
+    z-index: 0;
+
+    display: inline-flex;
+    align-items: center;
+
+    flex-shrink: 0;
+    justify-content: center;
+
+    width: 40px;
+    height: 40px;
+
+    margin-top: 12px;
+    margin-bottom: 12px;
+    padding: 0;
+
+    cursor: pointer;
+
+    border: none;
+    border-radius: var(--size-s1);
+    background-color: transparent;
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+    background-size: 24px 24px;
+
+    font-size: 0;
+    line-height: 0;
+
+    filter: invert(1);
+
+    .theme-dark & {
+      filter: none;
+    }
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--color-w10);
+      }
+    }
+
+    &:active {
+      background-color: var(--color-w16);
+    }
+
+    &:focus-visible {
+      outline: var(--focus-outline);
+    }
+
+    &_go-to-top {
+      background-image: url('../_assets/go-to-top-icon.svg');
+    }
+  }
+
+  &--link {
+    color: inherit;
+
+    border-bottom: 1px solid var(--color-text-light);
+
+    .theme-dark & {
+      border-bottom-color: var(--color-text-light-dt);
+    }
+
+    &:focus-visible {
+      outline: var(--focus-outline);
+    }
+
+    &:hover {
+      border-bottom-color: var(--color-text);
+
+      .theme-dark & {
+        border-bottom-color: var(--color-text-dt);
+      }
+    }
+  }
+
+  &--content {
+    display: flex;
+
+    align-items: center;
+
+    min-height: 40px;
+
+    margin: 12px 0;
+
+    text-align: right;
+  }
+}

dokka-subprojects/plugin-base-frontend/src/main/ui-kit/index.ts

@@ -5,6 +5,7 @@ import * as button from './button/index';
 import * as checkbox from './checkbox/index';
 import * as dropdown from './dropdown/index';
 import * as filterSection from './filter-section/index';
+import * as footer from './footer/index';
 import * as icon from './icon/index';
 import * as libraryName from './library-name/index';
 import * as libraryVersion from './library-version/index';
@@ -23,6 +24,7 @@ export {
   checkbox,
   dropdown,
   filterSection,
+  footer,
   icon,
   libraryName,
   libraryVersion,

dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/styles.scss

@@ -50,12 +50,12 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-b08);
+      background-color: var(--color-w10);
     }
   }
 
   &:active {
-    background-color: var(--color-w10);
+    background-color: var(--color-w16);
   }
 
   &:focus-visible {
@@ -85,3 +85,7 @@
 
   background-image: url('../_assets/burger.svg');
 }
+
+.navigation-controls--btn_go-to-top {
+  background-image: url('../_assets/go-to-top-icon.svg');
+}

dokka-subprojects/plugin-base/src/main/kotlin/org/jetbrains/dokka/base/renderers/html/htmlPreprocessors.kt

@@ -123,6 +123,7 @@ public object AssetsInstaller : PageTransformer {
         "ui-kit/assets/field-variable.svg",
         "ui-kit/assets/filter.svg",
         "ui-kit/assets/function.svg",
+        "ui-kit/assets/go-to-top-icon.svg",
         "ui-kit/assets/homepage.svg",
         "ui-kit/assets/interface-kotlin.svg",
         "ui-kit/assets/interface.svg",
@@ -135,8 +136,6 @@ public object AssetsInstaller : PageTransformer {
         "images/anchor-copy-button.svg",
         "images/copy-icon.svg",
         "images/copy-successful-icon.svg",
-        "images/footer-go-to-link.svg",
-        "images/go-to-top-icon.svg",
         "images/logo-icon.svg",
     )
 

dokka-subprojects/plugin-base/src/main/resources/dokka/styles/style.css

@@ -15,12 +15,6 @@
     --breadcrumb-margin: 24px;
     --hover-link-color: #5B5DEF;
 
-    --footer-height: 64px;
-    --footer-padding-top: 48px;
-    --footer-background: var(--default-gray);
-    --footer-font-color: var(--average-color);
-    --footer-go-to-top-color: white;
-
     --horizontal-spacing-for-content: 16px;
     --bottom-spacing: 16px;
     --color-scrollbar: rgba(39, 40, 44, 0.40);
@@ -872,66 +866,3 @@ Just in case of possible performance degradation it excluding tabs with briefs o
 div.runnablesample {
     height: fit-content;
 }
-
-/* --- footer --- */
-.footer {
-    clear: both;
-    display: flex;
-    align-items: center;
-    position: relative;
-    min-height: var(--footer-height);
-    font-size: 12px;
-    line-height: 16px;
-    letter-spacing: 0.2px;
-    color: var(--footer-font-color);
-    margin-top: auto;
-    background-color: var(--footer-background);
-}
-
-.footer--button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    background-color: var(--footer-go-to-top-color);
-    background-repeat: no-repeat;
-    background-position: 50% 50%;
-    padding: 0;
-    border: none;
-    cursor: pointer;
-    font-size: 0;
-    line-height: 0;
-    transition: background-color 200ms ease-in-out;
-    will-change: background-color;
-}
-
-.footer--button:hover {
-    opacity: 0.9;
-}
-
-.footer--button_go-to-top {
-    background-image: url("../images/go-to-top-icon.svg");
-    margin-left: var(--horizontal-spacing-for-content);
-    margin-right: 8px;
-}
-
-.footer--link {
-    display: inline-flex;
-    align-items: center;
-    color: var(--breadcrumb-font-color);
-}
-
-.footer--link_external:after {
-    content: '';
-    width: 12px;
-    height: 12px;
-    margin-left: 4px;
-    margin-right: var(--horizontal-spacing-for-content);
-    background-image: url("../images/footer-go-to-link.svg");
-    background-repeat: no-repeat;
-    background-position: 50% 50%;
-}
-
-/* /--- footer --- */

dokka-subprojects/plugin-base/src/main/resources/dokka/templates/includes/footer.ftl

@@ -1,12 +1,14 @@
 <#macro display>
     <div class="footer">
         <a href="#content" id="go-to-top-link" class="footer--button footer--button_go-to-top"></a>
-        <span>${footerMessage}</span>
-        <span class="pull-right">
-            <span>Generated by </span>
-            <a class="footer--link footer--link_external" href="https://github.com/Kotlin/dokka">
-                <span>dokka</span>
-            </a>
-        </span>
+        <div class="footer--content">
+            <div>
+                <span>Generated by </span>
+                <a class="footer--link footer--link_external" href="https://github.com/Kotlin/dokka">
+                    Dokka
+                </a>
+                <div>${footerMessage}</div>
+            </div>
+        </div>
     </div>
 </#macro>