@jetbrains/kotlin-web-site-ui 4.0.1 → 4.1.0-alpha.10

package/out/components/header/index.css

@@ -272,6 +272,387 @@
     }
 }
 
+.ktl-result-module_result_EKhUw {
+    box-sizing: border-box;
+    display: block;
+    padding: 16px;
+    text-decoration: none;
+}
+    .ktl-result-module_result_EKhUw:hover {
+        background: rgba(255, 255, 255, 0.1);
+        text-decoration: none;
+    }
+    .ktl-result-module_result_EKhUw:focus {
+        outline: none;
+        background: rgba(255, 255, 255, 0.1);
+    }
+    .ktl-result-module_result_EKhUw em {
+        background-color: rgba(127,82,255,0.3);
+        font-style: normal;
+    }
+
+.ktl-result-module_resultTitle_DSpAT {
+    margin-bottom: 6px;
+    overflow-wrap: break-word;
+}
+
+.ktl-result-module_text_fWBKG {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+@media (min-width: 768px) {
+    .ktl-result-module_result_EKhUw {
+        padding: 16px 32px;
+    }
+}
+.ktl-list-module_results_LlxqY {
+    box-sizing: border-box;
+    max-height: 305px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    background: #323236;
+    color: #fff;
+    overflow-y: scroll;
+}
+
+.ktl-list-module_topBar_OO0XT {
+    display: none;
+}
+
+.ktl-list-module_advancedSearch_XNy88 {
+    display: inline-block;
+    background: transparent;
+    border: 0;
+    padding: 6px 16px;
+    border-radius: 24px;
+    cursor: pointer;
+    flex-shrink: 0;
+    transform: translateY(-6px);
+}
+
+.ktl-list-module_advancedSearch_XNy88:hover {
+        background: rgba(255, 255, 255, .1);
+    }
+
+.ktl-list-module_advancedSearch_XNy88:focus {
+        outline: none;
+        box-shadow: rgba(107, 87, 255, 0.8) 0 0 0 4px;
+    }
+
+.ktl-list-module_searchString_rJnxa {
+    height: 40px;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+@media (min-width: 768px) {
+    .ktl-list-module_results_LlxqY {
+        max-height: 434px;
+    }
+
+    .ktl-list-module_topBar_OO0XT {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        padding: 34px 32px 4px 32px;
+    }
+}
+.ktl-empty-module_empty_xh1i- {
+    box-sizing: border-box;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    background: #323236;
+    padding: 16px;
+}
+
+.ktl-empty-module_resultString_-8dzl {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    overflow-wrap: break-word;
+}
+
+@media (min-width: 768px) {
+    .ktl-empty-module_empty_xh1i- {
+        padding: 32px;
+    }
+
+    .ktl-empty-module_resultString_-8dzl {
+        -webkit-line-clamp: 2;
+    }
+}
+.ktl-loading-module_loading_CtOhW {
+    box-sizing: border-box;
+    height: 92px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    background: #323236;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: left;
+}
+    .ktl-loading-module_loading_CtOhW > svg {
+        fill: #6B57FF;
+    }
+.ktl-quick-search-module_wrapper_kkbQQ {
+    box-sizing: border-box;
+    position: absolute;
+    left: 8px;
+    right: 8px;
+    bottom: -8px;
+    transform: translateY(100%);
+}
+
+@media (min-width: 640px) and (max-width: 768px) {
+    .ktl-quick-search-module_wrapper_kkbQQ {
+        bottom: 12px;
+    }
+}
+
+@media (min-width: 768px) {
+    .ktl-quick-search-module_wrapper_kkbQQ {
+        left: 0;
+        right: 0;
+    }
+}
+.ktl-loading-module_loader_B2IQl {
+    margin-top: 4px;
+}
+    .ktl-loading-module_loader_B2IQl > svg {
+        fill: #6B57FF;
+    }
+.ktl-empty-module_wrapper_cNB8Y {
+    display: block;
+    margin-top: 30px;
+}
+
+.ktl-empty-module_title_p2FMj {
+    margin-bottom: 24px;
+}
+
+.ktl-empty-module_image_6Xr6L {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 16px;
+}
+.ktl-chapters-module_chapters_J0wLB {
+    border-left: 1px solid var(--ktl-light-dark-20);
+    padding-left: 12px;
+    margin-top: 24px;
+}
+
+.ktl-chapters-module_chapterTitle_b6Rdz {
+    //border-bottom-color: transparent;
+}
+
+.ktl-chapters-module_chapterTitle_b6Rdz:hover {
+        //border-bottom-color: #19191C;
+    }
+
+.ktl-chapters-module_chapterTitle_b6Rdz em {
+        background: rgba(127, 82, 255, 0.2);
+        font-style: normal;
+    }
+
+.ktl-chapters-module_singleChapter_zSmx2:not(:last-child) {
+        margin-bottom: 12px;
+    }
+
+.ktl-chapters-module_headliner_ZBuf9 {
+    margin: 0;
+}
+
+.ktl-chapters-module_snippet_yROJo {
+    margin-top: 8px;
+    color: rgba(39, 40, 44, 0.7);
+}
+
+.ktl-chapters-module_snippet_yROJo em {
+        background: rgba(127, 82, 255, 0.2);
+        font-style: normal;
+    }
+
+.ktl-chapters-module_extraSection_lsZfw {
+    display: none;
+}
+
+.ktl-chapters-module_visibleSection_wQyvM {
+    display: block;
+}
+
+.ktl-chapters-module_moreButton_98oqy {
+    margin-top: 12px;
+}
+.ktl-hit-list-module_hitList_1MP6m {
+    margin: 40px 0 50px 0;
+}
+
+.ktl-hit-list-module_titleLink_rdJ6u em {
+        background: rgba(127, 82, 255, 0.2);
+        font-style: normal;
+    }
+
+.ktl-full-search-module_fullSearch_MTU8t {
+    display: none;
+    box-sizing: border-box;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background: #ffffff;
+    overflow-y: auto;
+}
+
+.ktl-full-search-module_closeSearch_5vYDG {
+    position: absolute;
+    top: 40px;
+    right: 40px;
+    display: flex;
+}
+
+.ktl-full-search-module_fullSearchClearButton_DGS6T {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    display: flex;
+    cursor: pointer;
+
+}
+
+.ktl-full-search-module_fullSearchClearButton_DGS6T > svg {
+        opacity: 0.7;
+    }
+
+.ktl-full-search-module_fullSearchClearButton_DGS6T:hover > svg {
+            opacity: 1;
+        }
+
+.ktl-full-search-module_fullSearchClearButton_DGS6T:focus {
+        outline: none;
+        box-shadow: rgba(107, 87, 255, 0.8) 0 0 0 4px;
+        border-radius: 100%;
+    }
+
+.ktl-full-search-module_fullSearchClearButton_DGS6T:focus > svg {
+            opacity: 1;
+        }
+
+.ktl-full-search-module_wrapper_9rxXb {
+    max-width: 704px;
+    margin: 0 auto;
+}
+
+.ktl-full-search-module_header_Wltw0 {
+    width: 100%;
+    padding-top: 120px;
+    padding-bottom: 10px;
+    position: sticky;
+    top: 0;
+    left: 0;
+    background: #ffffff;
+    z-index: 10;
+}
+
+.ktl-full-search-module_results_svcSE {
+    margin-top: 14px;
+}
+
+.ktl-full-search-module_switcher_o1RgM {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 14px;
+}
+
+@media (min-width: 768px) {
+    .ktl-full-search-module_fullSearch_MTU8t {
+        display: block;
+    }
+}
+
+.ktl-search-box-module_searchBox_0SgE9 {
+    position: relative;
+    width: 408px;
+}
+
+.ktl-search-box-module_searchInput_ba2QS {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    position: relative;
+}
+
+.ktl-search-box-module_searchMobileClose_fBF7e {
+    margin: 0;
+    padding: 0 8px;
+    border: 0;
+    background: none;
+    cursor: pointer;
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.ktl-search-box-module_searchMobileClose_fBF7e > svg {
+        fill: #ffffff;
+    }
+
+.ktl-search-box-module_customClearButton_yecGK {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    display: flex;
+    cursor: pointer;
+}
+
+.ktl-search-box-module_customClearButton_yecGK > svg {
+        fill: #ffffff;
+        opacity: 0.7;
+    }
+
+.ktl-search-box-module_customClearButton_yecGK:hover > svg {
+            opacity: 1;
+        }
+
+.ktl-search-box-module_customClearButton_yecGK:focus {
+        outline: none;
+        box-shadow: rgba(107, 87, 255, 0.8) 0 0 0 4px;
+        border-radius: 100%;
+    }
+
+.ktl-search-box-module_customClearButton_yecGK:focus > svg {
+            opacity: 1;
+        }
+
+@media (max-width: 767px) {
+    .ktl-search-box-module_searchBox_0SgE9 {
+        background: var(--ktl-dark-100);
+        width: auto;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        padding: 4px;
+    }
+}
+
+@media (min-width: 768px) {
+    .ktl-search-box-module_searchMobileClose_fBF7e {
+        display: none;
+    }
+}
+
 :root {
   --ktl-light-grey: #f4f4f4;
   --ktl-dark-100: rgba(39, 40, 44, 1);

package/out/components/header/is-macos.js

@@ -0,0 +1,5 @@
+function isMacOs() {
+  return window.navigator.appVersion.indexOf('Mac') !== -1;
+}
+
+export { isMacOs };

package/out/components/header/key-codes.js

@@ -0,0 +1,3 @@
+const ESC_CODE = 27;
+const KEY_K_CODE = 75;
+export { ESC_CODE, KEY_K_CODE };

package/out/components/header/quick-search/empty/empty.js

@@ -0,0 +1,17 @@
+import React__default from 'react';
+import { useTextStyles } from '@rescui/typography';
+import classNames from 'classnames';
+import styles from './empty.module.pcss.js';
+
+const EmptyResult = ({
+  placeholder
+}) => {
+  const textCn = useTextStyles();
+  return React__default.createElement("div", {
+    className: styles.empty
+  }, React__default.createElement("div", {
+    className: classNames(textCn('rs-h4'), styles.resultString)
+  }, placeholder));
+};
+
+export { EmptyResult };

package/out/components/header/quick-search/empty/empty.module.pcss.js

@@ -0,0 +1,5 @@
+var styles = {
+  "empty": "ktl-empty-module_empty_xh1i-",
+  "resultString": "ktl-empty-module_resultString_-8dzl"
+};
+export { styles as default };

package/out/components/header/quick-search/list/list.js

@@ -0,0 +1,33 @@
+import React__default from 'react';
+import { Result } from '../result/result.js';
+import { useTextStyles } from '@rescui/typography';
+import classNames from 'classnames';
+import { isMacOs } from '../../is-macos.js';
+import styles from './list.module.pcss.js';
+
+const ResultsList = ({
+  results,
+  searchString,
+  toggleFullSearch
+}) => {
+  const textCn = useTextStyles();
+  return React__default.createElement("div", {
+    className: styles.results
+  }, results.length ? React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+    className: styles.topBar
+  }, React__default.createElement("div", {
+    className: classNames(textCn('rs-text-3'), styles.searchString)
+  }, "Showing results for \u00AB", searchString, "\u00BB"), React__default.createElement("button", {
+    className: styles.advancedSearch,
+    onClick: toggleFullSearch
+  }, React__default.createElement("div", {
+    className: classNames(textCn('rs-text-3', {
+      hardness: 'hard'
+    }))
+  }, "Advanced search ", isMacOs() ? '⌘K' : 'Ctrl+K'))), results.map((searchResult, index) => React__default.createElement(Result, {
+    key: index,
+    hit: searchResult
+  }))) : null);
+};
+
+export { ResultsList };

package/out/components/header/quick-search/list/list.module.pcss.js

@@ -0,0 +1,7 @@
+var styles = {
+  "results": "ktl-list-module_results_LlxqY",
+  "topBar": "ktl-list-module_topBar_OO0XT",
+  "advancedSearch": "ktl-list-module_advancedSearch_XNy88",
+  "searchString": "ktl-list-module_searchString_rJnxa"
+};
+export { styles as default };

package/out/components/header/quick-search/loading/loading.js

@@ -0,0 +1,14 @@
+import React__default from 'react';
+import { LoadingIcon } from '@rescui/icons';
+import styles from './loading.module.pcss.js';
+
+const LoadingResults = () => {
+  return React__default.createElement("div", {
+    className: styles.loading
+  }, React__default.createElement(LoadingIcon, {
+    theme: 'dark',
+    size: 'l'
+  }));
+};
+
+export { LoadingResults };

package/out/components/header/quick-search/loading/loading.module.pcss.js

@@ -0,0 +1,4 @@
+var styles = {
+  "loading": "ktl-loading-module_loading_CtOhW"
+};
+export { styles as default };

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

@@ -0,0 +1,41 @@
+import React__default from 'react';
+import { ThemeProvider } from '@rescui/ui-contexts';
+import { ResultsList } from './list/list.js';
+import { EmptyResult } from './empty/empty.js';
+import { LoadingResults } from './loading/loading.js';
+import styles from './quick-search.module.pcss.js';
+
+const QuickSearch = ({
+  results,
+  searchString,
+  toggleFullSearch,
+  placeholder
+}) => {
+  if (placeholder) {
+    return React__default.createElement(ThemeProvider, {
+      theme: 'dark'
+    }, React__default.createElement("div", {
+      className: styles.wrapper
+    }, React__default.createElement(EmptyResult, {
+      placeholder: placeholder
+    })));
+  }
+
+  if (results.length > 0) {
+    return React__default.createElement(ThemeProvider, {
+      theme: 'dark'
+    }, React__default.createElement("div", {
+      className: styles.wrapper
+    }, React__default.createElement(ResultsList, {
+      results: results,
+      searchString: searchString,
+      toggleFullSearch: toggleFullSearch
+    })));
+  }
+
+  return React__default.createElement("div", {
+    className: styles.wrapper
+  }, React__default.createElement(LoadingResults, null));
+};
+
+export { QuickSearch };

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

@@ -0,0 +1,4 @@
+var styles = {
+  "wrapper": "ktl-quick-search-module_wrapper_kkbQQ"
+};
+export { styles as default };

package/out/components/header/quick-search/result/result.js

@@ -0,0 +1,30 @@
+import React__default from 'react';
+import { useTextStyles } from '@rescui/typography';
+import styles from './result.module.pcss.js';
+
+const Result = ({
+  hit
+}) => {
+  const textCn = useTextStyles();
+  const hitTitle = hit.title === hit.mainTitle ? hit.highlightedTitle : `${hit.mainTitle}: ${hit.highlightedTitle}`;
+  return React__default.createElement("a", {
+    className: styles.result,
+    href: hit.url
+  }, React__default.createElement("div", {
+    className: styles.resultTitle
+  }, React__default.createElement("div", {
+    className: textCn('rs-h4'),
+    dangerouslySetInnerHTML: {
+      __html: hitTitle
+    }
+  })), React__default.createElement("div", {
+    className: styles.text
+  }, React__default.createElement("div", {
+    className: textCn('rs-text-3'),
+    dangerouslySetInnerHTML: {
+      __html: hit.snippet
+    }
+  })));
+};
+
+export { Result };

package/out/components/header/quick-search/result/result.module.pcss.js

@@ -0,0 +1,6 @@
+var styles = {
+  "result": "ktl-result-module_result_EKhUw",
+  "resultTitle": "ktl-result-module_resultTitle_DSpAT",
+  "text": "ktl-result-module_text_fWBKG"
+};
+export { styles as default };

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

@@ -0,0 +1,73 @@
+import React__default, { useState, useCallback, useEffect } from 'react';
+import Input from '@rescui/input';
+import { SearchIcon, CloseIcon, ErrorIcon } from '@rescui/icons';
+import { QuickSearch } from '../quick-search/quick-search.js';
+import { FullSearch } from '../full-search/full-search.js';
+import styles from './search-box.module.pcss.js';
+import { useSearch } from '../search-wrapper/use-search.js';
+import { ESC_CODE } from '../key-codes.js';
+
+const SearchBox = ({
+  closeHandler,
+  isMobile,
+  fullSearchActive,
+  setFullSearchActive
+}) => {
+  const [searchInput, setSearchInput] = useState('');
+  const {
+    hits,
+    placeholder
+  } = useSearch(searchInput, 25);
+  const escHandler = useCallback(event => {
+    if (event.keyCode === ESC_CODE) {
+      closeHandler();
+    }
+  }, [closeHandler]);
+  const handleInput = useCallback(e => {
+    setSearchInput(e.target.value);
+  }, []);
+  const handleClear = useCallback(() => {
+    setSearchInput('');
+  }, []);
+  const toggleFullSearch = useCallback(() => {
+    setFullSearchActive(!fullSearchActive);
+  }, [fullSearchActive]);
+  useEffect(() => {
+    if (typeof document !== `undefined`) {
+      document.addEventListener('keydown', escHandler);
+      return () => {
+        document.removeEventListener('keydown', escHandler);
+      };
+    }
+  }, [escHandler]);
+  return React__default.createElement("div", {
+    className: styles.searchBox
+  }, React__default.createElement("div", {
+    className: styles.searchInput
+  }, React__default.createElement(Input, {
+    iconType: 'left',
+    value: searchInput,
+    onChange: handleInput,
+    onClear: isMobile ? closeHandler : handleClear,
+    icon: React__default.createElement(SearchIcon, null),
+    clearIcon: isMobile ? React__default.createElement(CloseIcon, null) : React__default.createElement("button", {
+      className: styles.customClearButton
+    }, React__default.createElement(ErrorIcon, null)),
+    autoFocus: true
+  }), isMobile && React__default.createElement("button", {
+    className: styles.searchMobileClose,
+    onClick: closeHandler
+  }, React__default.createElement(CloseIcon, null))), searchInput && React__default.createElement(QuickSearch, {
+    results: hits,
+    searchString: searchInput,
+    toggleFullSearch: toggleFullSearch,
+    placeholder: placeholder
+  }), fullSearchActive && React__default.createElement(FullSearch, {
+    toggleFullSearch: toggleFullSearch,
+    searchString: searchInput,
+    results: hits,
+    killSearch: closeHandler
+  }));
+};
+
+export { SearchBox };

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

@@ -0,0 +1,7 @@
+var styles = {
+  "searchBox": "ktl-search-box-module_searchBox_0SgE9",
+  "searchInput": "ktl-search-box-module_searchInput_ba2QS",
+  "searchMobileClose": "ktl-search-box-module_searchMobileClose_fBF7e",
+  "customClearButton": "ktl-search-box-module_customClearButton_yecGK"
+};
+export { styles as default };