Merge branch 'webpack:main' into fix-search-icon-color

Author: Deven14125

src/components/Configuration/Configuration.scss

@@ -1,7 +1,6 @@
 import PropTypes from "prop-types";
 import { Component, isValidElement } from "react";
 import Popover from "react-tiny-popover";
-import "./Configuration.scss";
 
 const DEFAULT_CHILDREN_SIZE = 4;
 
@@ -17,9 +16,14 @@ const addLink = (child, i, url) =>
   ) : (
     child
   );
+
 const Card = ({ body }) => (
-  <div className="markdown">
-    <pre className="inline">
+  // Applied .shadow > .markdown styles: max-height and overflow
+  <div className="markdown max-h-[48vh] overflow-auto">
+    {/* Combined .inline and .shadow pre.inline styles: 
+      display: block, margin: 0, padding: 0 with right-padding override 
+    */}
+    <pre className="block m-0 p-0 pr-[15px]">
       <code>{body}</code>
     </pre>
   </div>
@@ -83,7 +87,8 @@ export class Details extends Component {
         position={["right", "top"]}
         padding={0}
         onClickOutside={this.clickOutsideHandler}
-        containerClassName={"shadow"}
+        // Replaced .shadow with Tailwind equivalents, including the custom rgba box-shadow
+        containerClassName="overflow-visible rounded shadow-[-1px_1px_10px_0_rgba(255,255,255,0.44)]"
         content={<Card body={content} />}
       >
         <span

src/components/Configuration/components.jsx

@@ -1,8 +1,6 @@
 import PropTypes from "prop-types";
 import { Component } from "react";
 
-import "./Dropdown.scss";
-
 export default class Dropdown extends Component {
   static propTypes = {
     className: PropTypes.string,
@@ -14,56 +12,53 @@ export default class Dropdown extends Component {
   };
 
   componentDidMount() {
-    this._boundCloseOnEsc = this._closeDropdownOnEsc.bind(this);
-    this._boundCloseLostFocus = this._closeDropdownIfFocusLost.bind(this);
-
-    document.addEventListener("keyup", this._boundCloseOnEsc, true);
-    document.addEventListener("focus", this._boundCloseLostFocus, true);
-    document.addEventListener("click", this._boundCloseLostFocus, true);
+    document.addEventListener("keyup", this._closeDropdownOnEsc, true);
+    document.addEventListener("focus", this._closeDropdownIfFocusLost, true);
+    document.addEventListener("click", this._closeDropdownIfFocusLost, true);
   }
 
   componentWillUnmount() {
-    document.removeEventListener("keyup", this._boundCloseOnEsc, true);
-    document.removeEventListener("focus", this._boundCloseLostFocus, true);
-    document.removeEventListener("click", this._boundCloseLostFocus, true);
+    document.removeEventListener("keyup", this._closeDropdownOnEsc, true);
+    document.removeEventListener("focus", this._closeDropdownIfFocusLost, true);
+    document.removeEventListener("click", this._closeDropdownIfFocusLost, true);
   }
 
-  _closeDropdownOnEsc(event) {
+  _closeDropdownOnEsc = (event) => {
     if (event.key === "Escape" && this.state.active) {
       this.setState({ active: false }, () => {
         this.dropdownButton.focus();
       });
     }
-  }
+  };
 
-  _closeDropdownIfFocusLost(event) {
+  _closeDropdownIfFocusLost = (event) => {
     if (this.state.active && !this.dropdown.contains(event.target)) {
       this.setState({ active: false });
     }
-  }
+  };
 
   render() {
     const { className = "", items = [] } = this.props;
-    const activeMod = this.state.active ? "dropdown__list--active" : "";
 
     return (
       <nav
-        className={`dropdown ${className}`}
+        className={`relative ${className}`}
         ref={(el) => (this.dropdown = el)}
-        onMouseOver={this._toggle.bind(this, true)}
-        onMouseLeave={this._toggle.bind(this, false)}
+        onMouseOver={this._handleMouseOver}
+        onMouseLeave={this._handleMouseLeave}
       >
         <button
           ref={(el) => (this.dropdownButton = el)}
           aria-haspopup="true"
           aria-expanded={String(this.state.active)}
           aria-label="Select language"
-          onClick={this._handleClick.bind(this)}
+          onClick={this._handleClick}
+          className="cursor-pointer text-white border-none bg-transparent m-0 p-0 text-[length:inherit] flex items-center"
         >
           <svg
             viewBox="0 0 610 560"
             xmlns="http://www.w3.org/2000/svg"
-            className="dropdown__language text-gray-100 hover:text-blue-200 transition-colors duration-200"
+            className="w-20 h-20 align-middle text-gray-100 hover:text-blue-200 transition-colors duration-200"
           >
             <path d="m304.8 99.2-162.5-57.3v353.6l162.5-52.6z" />
             <path
@@ -91,25 +86,32 @@ export default class Dropdown extends Component {
           </svg>
           {/* Commented out until media breakpoints are in place
           <span>{ items[0].title }</span> */}
-          <i aria-hidden="true" className="dropdown__arrow" />
+          <i aria-hidden="true" className="leading-none before:content-['▾']" />
         </button>
-        <div className={`dropdown__list ${activeMod}`}>
-          <ul>
+        <div
+          className={`${
+            this.state.active ? "block" : "hidden"
+          } absolute top-full right-0 text-[13px] bg-[#526b78] rounded-md shadow-[0_4px_12px_rgba(0,0,0,0.4)] z-[9999]`}
+        >
+          <ul className="pt-1">
             {items.map((item, i) => (
-              <li key={item.title}>
+              <li
+                key={item.title}
+                className="py-1 px-2 list-none text-white transition-all duration-[250ms] hover:bg-[#175d96]"
+              >
                 <a
-                  onKeyDown={this._handleArrowKeys.bind(
-                    this,
-                    i,
-                    items.length - 1,
-                  )}
+                  onKeyDown={(event) =>
+                    this._handleArrowKeys(i, items.length - 1, event)
+                  }
                   ref={(node) =>
                     this.links ? this.links.push(node) : (this.links = [node])
                   }
                   href={item.url}
-                  className="px-5 block"
+                  className="px-5 block text-white visited:text-white hover:text-white"
                 >
-                  <span lang={item.lang}>{item.title}</span>
+                  <span lang={item.lang} className="align-top text-left">
+                    {item.title}
+                  </span>
                 </a>
               </li>
             ))}
@@ -119,7 +121,7 @@ export default class Dropdown extends Component {
     );
   }
 
-  _handleArrowKeys(currentIndex, lastIndex, event) {
+  _handleArrowKeys = (currentIndex, lastIndex, event) => {
     if (["ArrowDown", "ArrowUp"].includes(event.key)) {
       event.preventDefault();
     }
@@ -140,24 +142,21 @@ export default class Dropdown extends Component {
     }
 
     this.links[newIndex].focus();
-  }
+  };
 
-  _handleClick() {
+  _handleClick = () => {
     this.setState({ active: !this.state.active }, () => {
       if (this.state.active) {
         this.links[0].focus();
       }
     });
-  }
+  };
 
-  /**
-   * Toggle visibility of dropdown items
-   *
-   * @param {boolean} state - Whether to display or hide the items
-   */
-  _toggle(state = false) {
-    this.setState({
-      active: state,
-    });
-  }
+  _handleMouseOver = () => {
+    this.setState({ active: true });
+  };
+
+  _handleMouseLeave = () => {
+    this.setState({ active: false });
+  };
 }

src/components/Dropdown/Dropdown.jsx

@@ -9,7 +9,7 @@ const footerLinkClasses =
   "text-[11px] uppercase text-[#777676] hover:text-[#333333]";
 
 const Footer = () => (
-  <footer className="w-full flex-[0_0_auto]">
+  <footer className="w-full flex-[0_0_auto] print:hidden">
     <Container className="mx-auto max-w-[900px] px-5 pb-[30px] pt-[40px] text-center [&_a]:text-[#3b7eb5]">
       <div className="mb-[24px] flex justify-center">
         <a href="https://openjsf.org" target="_blank" rel="noopener noreferrer">

src/components/Dropdown/Dropdown.scss

@@ -128,7 +128,7 @@ function Navigation({ links, pathname, hash = "", toggleSidebar }) {
 
   return (
     <>
-      <header className="bg-blue-800 dark:bg-gray-900">
+      <header className="bg-blue-800 dark:bg-gray-900 print:hidden">
         <div className="flex items-center py-10 px-[16px] justify-between md:px-[24px] md:max-w-[1024px] md:mx-auto md:justify-start">
           <button
             aria-label="Toggle navigation menu"

src/components/Footer/Footer.jsx

@@ -1,6 +1,5 @@
 import { useEffect, useState } from "react";
 import isClient from "../../utilities/is-client.js";
-import "./OfflineBanner.scss";
 
 export default function OfflineBanner() {
   const [online, setOnline] = useState(() =>
@@ -26,21 +25,21 @@ export default function OfflineBanner() {
 
   return (
     <div
-      className="offline-banner"
+      className="flex items-center justify-center px-20 py-[8px] bg-blue-600 text-white text-14 font-medium text-center border-b border-blue-800"
       role="status"
       aria-live="polite"
       data-testid="offline-banner"
     >
-      <div className="offline-banner__content">
+      <div className="flex items-center gap-[8px]">
         <svg
-          className="offline-banner__icon"
+          className="shrink-0 w-[16px] h-[16px] fill-blue-200"
           aria-hidden="true"
           viewBox="0 0 24 24"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" />
         </svg>
-        <span className="offline-banner__text">
+        <span className="tracking-[0.01em]">
           You are currently offline. Some features may be unavailable.
         </span>
       </div>