@jetbrains/kotlin-web-site-ui 3.1.0 → 4.0.0-alpha.2

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

@@ -0,0 +1,51 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useTheme } from '@rescui/ui-contexts';
+import classNames from 'classnames';
+import styles from './top-menu.module.pcss.js';
+import { useTextStyles } from '@rescui/typography';
+import { HorizontalMenu } from './horizontal-menu/horizontal-menu.js';
+import { DropdownMenu } from './dropdown-menu/dropdown-menu.js';
+
+const TopMenu = ({
+  homeUrl,
+  title,
+  mobileTitle,
+  activeIndex,
+  items,
+  linkHandler = () => {},
+  className,
+  children,
+  forwardedRef,
+  mobileOverview
+}) => {
+  const theme = useTheme();
+  const textCn = useTextStyles();
+  return jsxs("div", Object.assign({
+    className: classNames(styles.topMenu, className, {
+      [styles.topMenuDarkTheme]: theme === 'dark'
+    }),
+    ref: forwardedRef
+  }, {
+    children: [jsx("a", Object.assign({
+      href: homeUrl,
+      className: classNames(styles.logo, textCn('rs-h3')),
+      onClick: event => linkHandler(event, homeUrl)
+    }, {
+      children: title
+    }), void 0), jsx(DropdownMenu, {
+      items: items,
+      activeIndex: activeIndex,
+      linkHandler: linkHandler,
+      title: title,
+      mobileTitle: mobileTitle,
+      homeUrl: homeUrl,
+      mobileOverview: mobileOverview
+    }, void 0), jsx(HorizontalMenu, {
+      items: items,
+      activeIndex: activeIndex,
+      linkHandler: linkHandler
+    }, void 0), children]
+  }), void 0);
+};
+
+export { TopMenu };

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

@@ -0,0 +1,6 @@
+var styles = {
+  "topMenu": "ktl-top-menu-module_top-menu_PRX9X",
+  "topMenuDarkTheme": "ktl-top-menu-module_top-menu-dark-theme_aNBxr",
+  "logo": "ktl-top-menu-module_logo_CNH2W"
+};
+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 = () => createTextCn(useTheme());
+
+export { useTextStyles };

package/out/components/typography/index.css

@@ -0,0 +1,176 @@
+: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-overlay-z-index: 900;
+  --ktl-top-menu-z-index: 905;
+  --ktl-header-z-index: 906;
+  --ktl-header-height-mobile: 48px;
+  --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);
+}
+
+.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,119 @@
+: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-overlay-z-index: 900;
+  --ktl-top-menu-z-index: 905;
+  --ktl-header-z-index: 906;
+  --ktl-header-height-mobile: 48px;
+  --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);
+}
+
+.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 };

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

@@ -0,0 +1,152 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import classNames from 'classnames';
+import styles from './youtube-player.module.pcss.js';
+import SvgPlay24 from './play_24.svg.js';
+import SvgLoading24 from './loading_24.svg.js';
+import { loadExternalScript, waitForYouTubePlayerApi, API_URL } from './utils.js';
+var YoutubePlayButtonMode;
+
+(function (YoutubePlayButtonMode) {
+  YoutubePlayButtonMode[YoutubePlayButtonMode["White"] = 0] = "White";
+  YoutubePlayButtonMode[YoutubePlayButtonMode["Black"] = 1] = "Black";
+  YoutubePlayButtonMode[YoutubePlayButtonMode["Primary"] = 2] = "Primary";
+})(YoutubePlayButtonMode || (YoutubePlayButtonMode = {}));
+
+var YoutubePlayerMode;
+
+(function (YoutubePlayerMode) {
+  YoutubePlayerMode[YoutubePlayerMode["Single"] = 0] = "Single";
+  YoutubePlayerMode[YoutubePlayerMode["Playlist"] = 1] = "Playlist";
+})(YoutubePlayerMode || (YoutubePlayerMode = {}));
+
+const YoutubePlayer = ({
+  id,
+  mode = YoutubePlayerMode.Single,
+  startTime,
+  autoplay = false,
+  width,
+  height,
+  preview,
+  previewImgSrc,
+  previewImgAlt,
+  playButtonMode = YoutubePlayButtonMode.White,
+  className
+}) => {
+  const [showVideo, setShowVideo] = useState(autoplay);
+  const [videoLoading, setVideoLoading] = useState(false);
+  const [isAPILoaded, setAPILoaded] = useState(false);
+  const playerWrapperDivRef = useRef(null);
+  const playerDivRef = useRef(null);
+  const playerInstanceRef = useRef(null);
+  let imgPreview = previewImgSrc;
+
+  if (!previewImgSrc && mode === YoutubePlayerMode.Single) {
+    imgPreview = `https://img.youtube.com/vi/${id}/maxresdefault.jpg`;
+  }
+
+  const wrapperStyles = {
+    width: width,
+    height: height
+  };
+  useEffect(() => {
+    if (!showVideo) {
+      return;
+    }
+
+    const loadYouTubePlayerApi = () => {
+      if (isAPILoaded) {
+        return Promise.resolve(window.YT);
+      }
+
+      return loadExternalScript(API_URL).then(() => waitForYouTubePlayerApi()).then(() => setAPILoaded(true)).then(() => window.YT);
+    };
+
+    loadYouTubePlayerApi().then(youtubeApi => {
+      if (!playerWrapperDivRef.current || !playerDivRef.current) {
+        return;
+      }
+
+      const {
+        width: videoWidth,
+        height: videoHeight
+      } = playerWrapperDivRef.current.getBoundingClientRect();
+      const options = {
+        width: videoWidth,
+        height: videoHeight,
+        playerVars: {
+          autoplay: 1,
+          rel: 0,
+          start: startTime,
+          modestbranding: 1
+        },
+        events: {
+          onReady: () => setVideoLoading(false),
+          onStateChange: event => {
+            if (event.data === 0) {
+              setShowVideo(false);
+            }
+          }
+        }
+      };
+
+      if (mode === YoutubePlayerMode.Single) {
+        options.videoId = id;
+      } else {
+        options.playerVars = { ...options.playerVars,
+          list: id,
+          listType: 'playlist'
+        };
+      }
+
+      playerInstanceRef.current = new youtubeApi.Player(playerDivRef.current, options);
+    });
+    return () => {
+      if (playerInstanceRef.current) {
+        playerInstanceRef.current.destroy();
+        playerInstanceRef.current = null;
+      }
+    };
+  }, [isAPILoaded, showVideo, startTime, id, mode]);
+  return jsxs("div", Object.assign({
+    ref: playerWrapperDivRef,
+    onClick: e => {
+      e.preventDefault();
+      setShowVideo(true);
+      setVideoLoading(true);
+    },
+    className: classNames(styles.youtubePlayer, className, {
+      [styles.showVideo]: showVideo
+    }),
+    style: wrapperStyles
+  }, {
+    children: [jsxs("div", Object.assign({
+      className: classNames(styles.preview, {
+        [styles.previewPlaylist]: !preview && !imgPreview && mode === YoutubePlayerMode.Playlist
+      })
+    }, {
+      children: [preview ? preview : imgPreview && jsx("img", {
+        src: imgPreview,
+        alt: previewImgAlt ? previewImgAlt : '',
+        className: styles.imagePreview
+      }, void 0), jsx("button", Object.assign({
+        type: "button",
+        className: classNames(styles.playButton, {
+          [styles.hide]: showVideo && !videoLoading,
+          [styles.playButtonWhite]: playButtonMode === YoutubePlayButtonMode.White,
+          [styles.playButtonBlack]: playButtonMode === YoutubePlayButtonMode.Black,
+          [styles.playButtonPrimary]: playButtonMode === YoutubePlayButtonMode.Primary
+        })
+      }, {
+        children: videoLoading ? jsx(SvgLoading24, {
+          className: styles.iconLoading
+        }, void 0) : jsx(SvgPlay24, {}, void 0)
+      }), void 0)]
+    }), void 0), jsx("div", {
+      className: styles.player,
+      ref: playerDivRef
+    }, void 0)]
+  }), void 0);
+};
+
+export { YoutubePlayButtonMode, YoutubePlayer, YoutubePlayerMode };

package/out/components/youtube-player/youtube-player.module.pcss.js

@@ -0,0 +1,16 @@
+var styles = {
+  "youtubePlayer": "ktl-youtube-player-module_youtube-player_aSb0a",
+  "preview": "ktl-youtube-player-module_preview_SuIdr",
+  "previewPlaylist": "ktl-youtube-player-module_preview-playlist_k6-Zp",
+  "player": "ktl-youtube-player-module_player_nH-tB",
+  "playButton": "ktl-youtube-player-module_play-button_SNPG7",
+  "playButtonWhite": "ktl-youtube-player-module_play-button_white_jsj-J",
+  "playButtonBlack": "ktl-youtube-player-module_play-button_black_N4JvM",
+  "playButtonPrimary": "ktl-youtube-player-module_play-button_primary_rk5oW",
+  "hide": "ktl-youtube-player-module_hide_w9Dr2",
+  "imagePreview": "ktl-youtube-player-module_image-preview_qXCFf",
+  "showVideo": "ktl-youtube-player-module_show-video_Y1Ri-",
+  "iconLoading": "ktl-youtube-player-module_icon-loading_9jAhI",
+  "iconRotating": "ktl-youtube-player-module_icon-rotating_Zyb5v"
+};
+export { styles as default };

package/out/packages/data-services/index.js

@@ -0,0 +1,9 @@
+import { PRIVACY_CONSENT_GET_MESSAGE, PRIVACY_CONSENT_SEND_ACCEPTANCE, PRIVACY_CONSENT_SEND_ACCEPTANCE_NEW } from './urls.js';
+import PrivacyConsentService from './privacy-consent-service.js';
+export { submitToMarketo } from './marketo-submiter.js';
+const privacy = new PrivacyConsentService({
+  getMessage: PRIVACY_CONSENT_GET_MESSAGE,
+  sendAcceptance: PRIVACY_CONSENT_SEND_ACCEPTANCE,
+  newSendAcceptance: PRIVACY_CONSENT_SEND_ACCEPTANCE_NEW
+});
+export { privacy };