@jetbrains/kotlin-web-site-ui 4.2.0-alpha.0 → 4.2.0-alpha.2

package/out/components/footer/nav/nav-item.js

@@ -10,14 +10,14 @@ const NavItem = ({
   const textCn = useTextStyles();
   const theme = useTheme();
   return React__default.createElement("li", {
-    className: classNames(styles.navItem, {
+    className: classNames(styles.navItem, textCn('rs-text-2'), {
       [styles.navItemDarkTheme]: theme == 'dark'
     })
   }, React__default.createElement("a", {
     target: data.isTargetBlank ? '_blank' : undefined,
     href: data.url,
     title: data.title,
-    className: classNames(textCn('rs-text-2'), textCn('rs-link', {
+    className: classNames(textCn('rs-link', {
       hardness: 'average',
       mode: 'clear'
     }))

package/out/components/header/header.js

@@ -87,7 +87,7 @@ const Header = forwardRef(({
     ref: headerRef,
     className: classNames(styles.headerMenu, className, {
       [styles.withMenuPopup]: menuPopupExpanded,
-      [styles.border]: hasBorder
+      [styles.border]: hasBorder || menuPopupExpanded
     }),
     "data-test": 'header'
   }, isMenuPopupVisible && currentTitle && currentUrl && !menuPopupExpanded ? React__default.createElement(LogoSmall, {
@@ -106,7 +106,7 @@ const Header = forwardRef(({
     items: itemsWithoutHomeSection,
     theme: dropdownTheme,
     linkHandler: linkHandler
-  }), React__default.createElement(SearchButton, {
+  }), !menuPopupExpanded && React__default.createElement(SearchButton, {
     onClick: handleSearchButtonClick,
     isActive: hasSearch
   }), isMenuPopupVisible && React__default.createElement(MenuPopup, {

package/out/components/header/index.css

@@ -61,7 +61,7 @@
 
 @media (max-width: 640px) {
   .ktl-header-module_header-menu_wh71L {
-    padding: 0 16px;
+    padding: 0 0 0 16px;
     height: var(--ktl-header-height-mobile);
   }
 
@@ -267,12 +267,13 @@
 @media (max-width: 640px) {
   .ktl-search-button-module_button_YHJPv {
     display: none;
-    margin: 0 16px 0 0;
   }
+}
 
-    .ktl-search-button-module_button_YHJPv.ktl-search-button-module_active_lUmdh {
-      display: flex;
-    }
+@media (min-width: 641px) {
+  .ktl-search-button-module_mobileButton_KT2YP {
+    display: none;
+  }
 }
 
 .ktl-result-module_result_EKhUw {
@@ -708,8 +709,8 @@
   background: none;
   padding: 0;
   margin: 0;
-  width: 24px;
-  height: 24px;
+  width: var(--ktl-header-height-mobile);
+  height: var(--ktl-header-height-mobile);
   align-items: center;
   justify-content: center;
   transition: color var(--ktl-transition-xfast),
@@ -778,7 +779,7 @@
 .ktl-menu-list-item-module_menu-item-root_Rzcqb:not(a) {
         font-size: 13px;
         text-transform: uppercase;
-        line-height: 28px;
+        line-height: 20px;
         color: rgba(255, 255, 255, 0.7);
     }
 
@@ -823,6 +824,7 @@
 .ktl-logo-small-module_link_SKXAa {
   color: rgba(255, 255, 255, 1);
   text-decoration: none;
+  font-size: 16px;
 }
 
 .ktl-logo-small-module_icon-wrap_6hRnO {
@@ -831,9 +833,7 @@
   align-items: center;
   justify-items: center;
   height: 100%;
-  margin-right: 16px;
-  padding-right: 16px;
-  border-right: 1px solid rgba(255, 255, 255, 0.2);
+  margin-right: 12px;
 }
 
 .ktl-logo-small-module_icon_NyEog {

package/out/components/header/logo-small/logo-small.js

@@ -20,7 +20,7 @@ const LogoSmall = ({
     className: styles.icon
   })), React__default.createElement("a", {
     href: homeUrl,
-    className: classNames(styles.link, textCn('rs-h3'))
+    className: classNames(styles.link, textCn('rs-h4'))
   }, homeTitle));
 };
 

package/out/components/header/menu-popup/menu-button/menu-button.js

@@ -1,20 +1,23 @@
 import React__default from 'react';
 import styles from './menu-button.module.pcss.js';
 import classNames from 'classnames';
-import SvgHamburgerIcon from './hamburger-icon.svg.js';
-import SvgCloseIcon from './close-icon.svg.js';
+import Button from '@rescui/button';
+import { CloseIcon, HamburgerIcon } from '@rescui/icons';
 
 const MenuButton = ({
   onClick,
   isExpanded
 }) => {
-  return React__default.createElement("button", {
+  return React__default.createElement(Button, {
     type: "button",
     className: classNames(styles.button),
     "aria-haspopup": "true",
     "aria-label": "Open the navigation",
-    onClick: onClick
-  }, isExpanded ? React__default.createElement(SvgCloseIcon, null) : React__default.createElement(SvgHamburgerIcon, null));
+    onClick: onClick,
+    size: 'l',
+    mode: 'clear',
+    icon: isExpanded ? React__default.createElement(CloseIcon, null) : React__default.createElement(HamburgerIcon, null)
+  });
 };
 
 export { MenuButton };

package/out/components/header/search-button/search-button.js

@@ -2,13 +2,15 @@ import React__default from 'react';
 import styles from './search-button.module.pcss.js';
 import classNames from 'classnames';
 import SvgSearch from './search.svg.js';
+import { SearchIcon } from '@rescui/icons';
+import Button from '@rescui/button';
 const DATA_TEST_HEADER_SEARCH_BUTTON = 'header-search-button';
 
 const SearchButton = ({
   onClick,
   isActive
 }) => {
-  return React__default.createElement("button", {
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement("button", {
     type: "button",
     className: classNames(styles.button, {
       [styles.active]: isActive
@@ -16,7 +18,16 @@ const SearchButton = ({
     "data-test": DATA_TEST_HEADER_SEARCH_BUTTON,
     "aria-label": "Search",
     onClick: onClick
-  }, React__default.createElement(SvgSearch, null));
+  }, React__default.createElement(SvgSearch, null)), React__default.createElement("div", {
+    className: styles.mobileButton
+  }, React__default.createElement(Button, {
+    "data-test": DATA_TEST_HEADER_SEARCH_BUTTON,
+    "aria-label": "Search",
+    onClick: onClick,
+    mode: 'clear',
+    size: 'l',
+    icon: React__default.createElement(SearchIcon, null)
+  })));
 };
 
 export { DATA_TEST_HEADER_SEARCH_BUTTON, SearchButton };

package/out/components/header/search-button/search-button.module.pcss.js

@@ -1,5 +1,6 @@
 var styles = {
   "button": "ktl-search-button-module_button_YHJPv",
-  "active": "ktl-search-button-module_active_lUmdh"
+  "active": "ktl-search-button-module_active_lUmdh",
+  "mobileButton": "ktl-search-button-module_mobileButton_KT2YP"
 };
 export { styles as default };

package/out/components/top-menu/dropdown-menu/dropdown-menu.js

@@ -60,6 +60,7 @@ const DropdownMenu = ({
     className: textCn('rs-text-2')
   }, title), React__default.createElement(Button, {
     mode: 'clear',
+    size: 'l',
     icon: React__default.createElement(CloseIcon, null),
     onClick: handleClick
   })), _items.map((item, index) => React__default.createElement("a", {

package/out/components/top-menu/index.css

@@ -123,6 +123,7 @@
     height: 100%;
     justify-self: flex-start;
     white-space: nowrap;
+    width: 100%;
     min-width: 0;
     max-width: 100%;
 }
@@ -131,12 +132,12 @@
     border: none;
     background: none;
     height: 100%;
+    width: 100%;
     max-width: 100%;
     padding: 0;
     margin: 0;
     display: flex;
     align-items: center;
-    justify-content: space-between;
     cursor: pointer;
 }
 
@@ -159,7 +160,7 @@
     color: #ffffff;
     align-items: center;
     height: var(--ktl-header-height-mobile);
-    padding: 0 16px;
+    padding: 0 0 0 16px;
     border-bottom: 1px solid rgba(255, 255, 255, 0.3);
     justify-content: space-between;
 }
@@ -211,7 +212,7 @@
     }
 
 .ktl-dropdown-menu-module_dropdown-list-dark-theme_P60ol {
-    background: var(--ktl-dark-bg-hard);
+    background: rgba(39, 40, 44, 1);
 }
 
 .ktl-dropdown-menu-module_dropdown-list-dark-theme_P60ol .ktl-dropdown-menu-module_dropdown-item_X3tZ-:hover {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jetbrains/kotlin-web-site-ui",
   "description": "UI components for Kotlin web sites development",
-  "version": "4.2.0-alpha.0",
+  "version": "4.2.0-alpha.2",
   "license": "Apache-2.0",
   "author": "JetBrains",
   "files": [
@@ -47,7 +47,7 @@
     "@babel/preset-typescript": "^7.13.0",
     "@babel/register": "^7.11.5",
     "@react-hook/resize-observer": "^1.2.5",
-    "@rescui/button": "^0.2.1",
+    "@rescui/button": "^0.6.9",
     "@rescui/checkbox": "^0.1.0",
     "@rescui/focus-manager": "^0.1.1",
     "@rescui/icons": "^0.8.2",

package/out/components/header/menu-popup/menu-button/close-icon.svg.js

@@ -1,35 +0,0 @@
-import * as React from 'react';
-
-var _path;
-
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-const SvgCloseIcon = props => /*#__PURE__*/React.createElement("svg", _extends({
-  width: 16,
-  height: 16,
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
-  fillRule: "evenodd",
-  clipRule: "evenodd",
-  d: "M15.707 1.707 14.293.293 8 6.586 1.707.293.293 1.707 6.586 8 .293 14.293l1.414 1.414L8 9.414l6.293 6.293 1.414-1.414L9.414 8l6.293-6.293Z",
-  fill: "currentColor"
-})));
-
-export { SvgCloseIcon as default };

package/out/components/header/menu-popup/menu-button/hamburger-icon.svg.js

@@ -1,35 +0,0 @@
-import * as React from 'react';
-
-var _path;
-
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-const SvgHamburgerIcon = props => /*#__PURE__*/React.createElement("svg", _extends({
-  width: 24,
-  height: 24,
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
-  fillRule: "evenodd",
-  clipRule: "evenodd",
-  d: "M4 5h16v2H4V5Zm0 6h16v2H4v-2Zm16 6H4v2h16v-2Z",
-  fill: "currentColor"
-})));
-
-export { SvgHamburgerIcon as default };