@jetbrains/kotlin-web-site-ui 0.0.0-foundation-changes.1

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

@@ -0,0 +1,129 @@
+import React__default, { useState, useCallback, useEffect, useRef, useLayoutEffect } from 'react';
+import classNames from 'classnames';
+import styles from './vertical-menu.module.pcss.js';
+import { useTextStyles } from '@rescui/typography';
+import SvgArrowDropdownIcon from './arrow-dropdown-icon.svg.js';
+import { useTheme } from '@rescui/ui-contexts';
+import Button from '@rescui/button';
+import { CloseIcon } from '@rescui/icons';
+import { createPortal } from 'react-dom';
+import { RemoveScrollBar } from 'react-remove-scroll-bar';
+
+const VerticalMenu = ({
+  homeUrl,
+  title,
+  mobileTitle = 'Overview',
+  items,
+  activeIndex,
+  linkHandler,
+  mobileOverview = true,
+  topMenuRef
+}) => {
+  const textCn = useTextStyles();
+
+  const _items = (mobileOverview ? [{
+    title: mobileTitle,
+    url: homeUrl
+  }] : []).concat(items);
+
+  const _activeIndex = mobileOverview ? activeIndex + 1 : activeIndex;
+
+  const activeItem = _items[_activeIndex];
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [portalRoot, setPortalRoot] = useState(null);
+  const handleOpen = useCallback(() => {
+    setIsExpanded(true);
+  }, []);
+  const handleClose = useCallback(() => {
+    setIsExpanded(false);
+  }, []);
+  useEffect(() => {
+    if (typeof document !== `undefined`) {
+      setPortalRoot(document.body);
+    }
+  }, []);
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+    className: classNames(styles.dropdownMenu, {
+      [styles.dropdownMenuExpanded]: isExpanded
+    })
+  }, React__default.createElement("button", {
+    className: classNames(styles.button),
+    "aria-haspopup": "true",
+    onClick: handleOpen
+  }, React__default.createElement("span", {
+    className: textCn('rs-text-2', {
+      hardness: 'hard'
+    })
+  }, activeItem.title), React__default.createElement(SvgArrowDropdownIcon, {
+    className: styles.icon
+  })), !!portalRoot && isExpanded && createPortal(React__default.createElement(VerticalMenuDropDown, {
+    title: title,
+    activeIndex: _activeIndex,
+    items: _items,
+    onClose: handleClose,
+    linkHandler: linkHandler,
+    topMenuRef: topMenuRef
+  }), portalRoot)));
+};
+
+const VerticalMenuDropDown = ({
+  title,
+  onClose,
+  items,
+  linkHandler,
+  activeIndex,
+  topMenuRef
+}) => {
+  const textCn = useTextStyles();
+  const theme = useTheme();
+  const navRef = useRef(null);
+  const [navStyle, setNavStyle] = useState({});
+  const [topMenuSticky, setTopMenuSticky] = useState(false);
+  useEffect(() => {
+    const topMenuTopOffset = topMenuRef?.current?.getBoundingClientRect().top;
+
+    if (topMenuTopOffset !== undefined) {
+      setTopMenuSticky(topMenuTopOffset === 0);
+    }
+  }, []);
+  useLayoutEffect(() => {
+    if (topMenuRef.current) {
+      setNavStyle({
+        top: topMenuRef.current.getBoundingClientRect().top
+      });
+    }
+  }, [topMenuRef]);
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(RemoveScrollBar, {
+    gapMode: "margin"
+  }), React__default.createElement("nav", {
+    ref: navRef,
+    style: navStyle,
+    className: classNames(styles.dropdownList, {
+      [styles.dropdownListDarkTheme]: theme === 'dark'
+    })
+  }, React__default.createElement("div", {
+    className: classNames(styles.dropdownHeader, {
+      [styles.stickyHeader]: topMenuSticky
+    })
+  }, React__default.createElement("div", {
+    className: textCn('rs-text-2')
+  }, title), React__default.createElement(Button, {
+    mode: 'clear',
+    size: 'l',
+    icon: React__default.createElement(CloseIcon, null),
+    onClick: onClose
+  })), items.map((item, index) => React__default.createElement("a", {
+    key: item.url,
+    href: item.url,
+    className: classNames(styles.dropdownItem, textCn('rs-text-1', {
+      hardness: 'hard'
+    }), {
+      [styles.dropdownItemActive]: index === activeIndex
+    }),
+    onClick: event => linkHandler?.(event, item.url),
+    target: item.isExternal ? '_blank' : undefined,
+    rel: "noreferrer"
+  }, item.title))));
+};
+
+export { VerticalMenu };

package/out/components/top-menu/vertical-menu/vertical-menu.module.pcss.js

@@ -0,0 +1,14 @@
+var styles = {
+  "verticalMenu": "ktl-vertical-menu-module_vertical-menu_aLIbw",
+  "button": "ktl-vertical-menu-module_button_zqr20",
+  "buttonText": "ktl-vertical-menu-module_button-text_aXith",
+  "icon": "ktl-vertical-menu-module_icon_-Ieat",
+  "dropdownHeader": "ktl-vertical-menu-module_dropdown-header_77lTy",
+  "stickyHeader": "ktl-vertical-menu-module_sticky-header_BlLzL",
+  "dropdownList": "ktl-vertical-menu-module_dropdown-list_N3KWV",
+  "dropdownItem": "ktl-vertical-menu-module_dropdown-item_XLfp4",
+  "dropdownItemActive": "ktl-vertical-menu-module_dropdown-item-active_iBUbj",
+  "verticalMenuExpanded": "ktl-vertical-menu-module_vertical-menu-expanded_kFaaI",
+  "dropdownListDarkTheme": "ktl-vertical-menu-module_dropdown-list-dark-theme_A1-Bw"
+};
+export { styles as default };

package/out/components/typography/create-text-cn.js

@@ -0,0 +1,26 @@
+import bemCnFast from 'bem-cn-fast';
+
+function createTextCn(theme) {
+  if (!theme) {
+    throw new TypeError('theme argument is required');
+  }
+
+  function textCn(type = 'ktl-text-1', params = {
+    paragraphOffsetAuto: false,
+    hardness: undefined,
+    external: false,
+    mode: undefined
+  }) {
+    return bemCnFast(type)({
+      'paragraph-offset-auto': params.paragraphOffsetAuto,
+      hardness: params.hardness,
+      external: params.external,
+      mode: params.mode,
+      theme
+    });
+  }
+
+  return textCn;
+}
+
+export { createTextCn };

package/out/components/typography/hooks.js

@@ -0,0 +1,6 @@
+import { useTheme } from '@rescui/ui-contexts';
+import { createTextCn } from './create-text-cn.js';
+
+const useTextStyles = theme => createTextCn(useTheme(theme));
+
+export { useTextStyles };

package/out/components/typography/index.css

@@ -0,0 +1,192 @@
+:root {
+  --ktl-light-grey: #f4f4f4;
+  --ktl-dark-100: rgba(39, 40, 44, 1);
+  --ktl-dark-bg-hard: rgba(27, 27, 27, 1);
+  --ktl-icon-color-dark: rgba(39, 40, 44, 0.75);
+  --ktl-color-white-light: rgba(255, 255, 255, 0.75);
+  --ktl-transition-xfast: 100ms;
+  --ktl-transition-fast: 300ms;
+  --ktl-color-primary-light-theme: #7f52ff;
+  --ktl-color-dark-40: rgba(39, 40, 44, 0.4);
+  --ktl-light-text-hard: rgba(39, 40, 44, 1);
+  --ktl-light-dark-20: rgba(39, 40, 44, 0.2);
+  --ktl-divider-color: rgba(25, 25, 28, .2);
+  --ktl-overlay-z-index: 900;
+  --ktl-top-menu-z-index: 905;
+  --ktl-header-z-index: 906;
+  --ktl-mobile-dropdown-list-z-index: 907;
+  --ktl-header-height-mobile: 52px;
+  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
+  --rs-font-family-ui: var(--ktl-font-family-inter);
+}
+
+:root {
+  --ktl-box-block-s: 4px;
+  --ktl-box-block-m: 8px;
+  --ktl-box-block-l: 16px;
+
+  --ktl-box-section-s: 24px;
+  --ktl-box-section-m: 32px;
+  --ktl-box-section-l: 48px;
+
+  --ktl-box-page-s: 64px;
+  --ktl-box-page-m: 72px;
+  --ktl-box-page-l: 96px;
+}
+
+.ktl-hero {
+        font-family: var(--ktl-font-family-inter);
+        color: var(--ktl-light-text-hard);
+        font-weight: normal;
+        font-size: 42px;
+        line-height: 48px;
+        letter-spacing: -1px;
+        margin: 0;
+    }
+
+.ktl-hero_theme_dark {
+            color: #fff;
+        }
+
+@media (min-width: 1200px) {
+
+.ktl-hero {
+            font-size: 64px;
+            line-height: 72px;
+            letter-spacing: -3px
+    }
+        }
+
+.ktl-h1 {
+        font-family: var(--ktl-font-family-inter);
+        color: var(--ktl-light-text-hard);
+        font-weight: normal;
+        font-size: 36px;
+        line-height: 44px;
+        letter-spacing: -1px;
+        margin: 0;
+    }
+
+.ktl-h1_theme_dark {
+            color: #fff;
+        }
+
+@media (min-width: 1200px) {
+
+.ktl-h1 {
+            font-size: 43px;
+            line-height: 48px
+    }
+
+        }
+
+.ktl-h2 {
+        font-family: var(--ktl-font-family-inter);
+        color: var(--ktl-light-text-hard);
+        font-weight: 500;
+        font-size: 24px;
+        line-height: 32px;
+        letter-spacing: -0.5px;
+        margin: 0;
+
+    }
+
+.ktl-h2_theme_dark {
+            color: #fff;
+        }
+
+@media (min-width: 1200px) {
+
+.ktl-h2 {
+            font-size: 31px;
+            line-height: 40px
+
+    }
+
+        }
+
+.ktl-subtitle {
+        font-family: var(--ktl-font-family-inter);
+        color: var(--ktl-light-text-hard);
+        font-weight: normal;
+        font-size: 20px;
+        line-height: 32px;
+        margin: 0;
+    }
+
+.ktl-subtitle_theme_dark {
+            color: #fff;
+        }
+
+@media (min-width: 1200px) {
+
+.ktl-subtitle {
+            font-size: 31px;
+            line-height: 40px
+    }
+        }
+
+.ktl-h3 {
+        font-family: var(--ktl-font-family-inter);
+        color: var(--ktl-light-text-hard);
+        font-weight: 600;
+        font-size: 20px;
+        line-height: 32px;
+        margin: 0;
+    }
+
+.ktl-h3_theme_dark {
+            color: #fff;
+        }
+
+.ktl-h4 {
+        font-family: var(--ktl-font-family-inter);
+        color: var(--ktl-light-text-hard);
+        font-weight: 600;
+        font-size: 16px;
+        line-height: 24px;
+        margin: 0;
+    }
+
+.ktl-h4_theme_dark {
+            color: #fff;
+        }
+
+.ktl-text-1 {
+        font-family: var(--ktl-font-family-inter);
+        color: var(--ktl-light-text-hard);
+        font-weight: normal;
+        font-size: 20px;
+        line-height: 32px;
+        margin: 0;
+    }
+
+.ktl-text-1_theme_dark {
+            color: #fff;
+        }
+
+.ktl-text-2 {
+        font-family: var(--ktl-font-family-inter);
+        color: var(--ktl-light-text-hard);
+        font-weight: normal;
+        font-size: 16px;
+        line-height: 24px;
+        margin: 0;
+    }
+
+.ktl-text-2_theme_dark {
+            color: #fff;
+        }
+
+.ktl-text-3 {
+        font-family: var(--ktl-font-family-inter);
+        color: var(--ktl-light-text-hard);
+        font-weight: normal;
+        font-size: 13px;
+        line-height: 20px;
+        margin: 0;
+    }
+
+.ktl-text-3_theme_dark {
+            color: #fff;
+        }

package/out/components/typography/index.js

@@ -0,0 +1,3 @@
+import './index.css';
+export { createTextCn } from './create-text-cn.js';
+export { useTextStyles } from './hooks.js';

package/out/components/youtube-player/index.css

@@ -0,0 +1,135 @@
+:root {
+  --ktl-light-grey: #f4f4f4;
+  --ktl-dark-100: rgba(39, 40, 44, 1);
+  --ktl-dark-bg-hard: rgba(27, 27, 27, 1);
+  --ktl-icon-color-dark: rgba(39, 40, 44, 0.75);
+  --ktl-color-white-light: rgba(255, 255, 255, 0.75);
+  --ktl-transition-xfast: 100ms;
+  --ktl-transition-fast: 300ms;
+  --ktl-color-primary-light-theme: #7f52ff;
+  --ktl-color-dark-40: rgba(39, 40, 44, 0.4);
+  --ktl-light-text-hard: rgba(39, 40, 44, 1);
+  --ktl-light-dark-20: rgba(39, 40, 44, 0.2);
+  --ktl-divider-color: rgba(25, 25, 28, .2);
+  --ktl-overlay-z-index: 900;
+  --ktl-top-menu-z-index: 905;
+  --ktl-header-z-index: 906;
+  --ktl-mobile-dropdown-list-z-index: 907;
+  --ktl-header-height-mobile: 52px;
+  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
+  --rs-font-family-ui: var(--ktl-font-family-inter);
+}
+
+:root {
+  --ktl-box-block-s: 4px;
+  --ktl-box-block-m: 8px;
+  --ktl-box-block-l: 16px;
+
+  --ktl-box-section-s: 24px;
+  --ktl-box-section-m: 32px;
+  --ktl-box-section-l: 48px;
+
+  --ktl-box-page-s: 64px;
+  --ktl-box-page-m: 72px;
+  --ktl-box-page-l: 96px;
+}
+
+.ktl-youtube-player-module_youtube-player_aSb0a {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: black;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.ktl-youtube-player-module_preview_SuIdr img {
+  vertical-align: top;
+}
+
+.ktl-youtube-player-module_preview-playlist_k6-Zp {
+  width: 100%;
+}
+
+.ktl-youtube-player-module_preview-playlist_k6-Zp::before {
+    content: "";
+    display: block;
+    padding-bottom: 56.25%;
+    background: var(--ktl-dark-100);
+  }
+
+.ktl-youtube-player-module_player_nH-tB {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  display: none;
+}
+
+.ktl-youtube-player-module_play-button_SNPG7 {
+  padding: 12px;
+  position: absolute;
+  top: calc(50% - 24px);
+  left: calc(50% - 24px);
+  border-radius: 50%;
+  border: none;
+  transition: color var(--ktl-transition-fast);
+  cursor: pointer;
+  outline: none;
+  height: 48px;
+}
+
+.ktl-youtube-player-module_play-button_white_jsj-J {
+    color: var(--ktl-dark-100);
+    background-color:  #ffffff;
+  }
+
+.ktl-youtube-player-module_play-button_black_N4JvM {
+    color:  #ffffff;
+    background-color: var(--ktl-dark-100);
+  }
+
+.ktl-youtube-player-module_play-button_primary_rk5oW {
+    color: #ffffff;
+    background: var(--ktl-color-primary-light-theme);
+  }
+
+.ktl-youtube-player-module_hide_w9Dr2 {
+  display: none;
+}
+
+.ktl-youtube-player-module_image-preview_qXCFf {
+  display: block;
+  width: 100%;
+}
+
+.ktl-youtube-player-module_show-video_Y1Ri- .ktl-youtube-player-module_player_nH-tB {
+    display: block;
+  }
+
+.ktl-youtube-player-module_show-video_Y1Ri- .ktl-youtube-player-module_image-preview_qXCFf {
+    opacity: 0;
+  }
+
+.ktl-youtube-player-module_icon-loading_9jAhI {
+  -webkit-animation: ktl-youtube-player-module_icon-rotating_Zyb5v .7s linear infinite;
+          animation: ktl-youtube-player-module_icon-rotating_Zyb5v .7s linear infinite;
+  transform-origin: center center;
+}
+
+@-webkit-keyframes ktl-youtube-player-module_icon-rotating_Zyb5v {
+  to {
+    transform: rotate(360deg)
+  }
+}
+
+@keyframes ktl-youtube-player-module_icon-rotating_Zyb5v {
+  to {
+    transform: rotate(360deg)
+  }
+}

package/out/components/youtube-player/index.js

@@ -0,0 +1,3 @@
+import './index.css';
+import { YoutubePlayer } from './youtube-player.js';
+export { YoutubePlayer as default } from './youtube-player.js';

package/out/components/youtube-player/loading_24.svg.js

@@ -0,0 +1,31 @@
+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 SvgLoading24 = props => /*#__PURE__*/React.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24
+}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+  d: "M12 3.25A8.76 8.76 0 0 0 3.25 12h1.5A7.25 7.25 0 1 1 12 19.25v1.5a8.75 8.75 0 1 0 0-17.5z"
+})));
+
+export { SvgLoading24 as default };

package/out/components/youtube-player/play_24.svg.js

@@ -0,0 +1,31 @@
+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 SvgPlay24 = props => /*#__PURE__*/React.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24
+}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+  d: "M19 12 8 4v16l11-8z"
+})));
+
+export { SvgPlay24 as default };

package/out/components/youtube-player/utils.js

@@ -0,0 +1,28 @@
+const API_URL = 'https://www.youtube.com/iframe_api';
+
+function waitForYouTubePlayerApi() {
+  return new Promise(resolve => {
+    if (window.YT && window.YT.loaded) {
+      resolve();
+    } else {
+      window.onYouTubeIframeAPIReady = resolve;
+    }
+  });
+}
+
+function loadExternalScript(url) {
+  return new Promise((resolve, reject) => {
+    const script = document.createElement('script');
+    script.type = 'text/javascript';
+    script.async = true;
+    script.src = url;
+
+    script.onload = () => resolve();
+
+    script.onerror = () => reject();
+
+    document.head.appendChild(script);
+  });
+}
+
+export { API_URL, loadExternalScript, waitForYouTubePlayerApi };