docs(react-ui, react-ui-validations): add new documentation banner (#…

…3549)

packages/react-ui-validations/docs/Common/Notification.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export const NotificationContainer = styled.div`
+  position: sticky;
+  z-index: 2;
+  top: 0;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  align-items: flex-start;
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0 auto;
+  padding: 16px 24px;
+  background: #ff4785;
+  color: white;
+  font-size: 16px;
+  line-height: 1.375;
+
+  @media screen and (min-width: 768px) {
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+  }
+`;
+
+export const NotificationContent = styled.div`
+  max-width: 1080px;
+
+  a {
+    color: white;
+  }
+`;
+
+export const NotificationButton = styled.a`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  padding: 8px 16px;
+  border-radius: 6px;
+  background: #fff;
+  opacity: 0.955;
+  color: #222222;
+  font-size: 16px;
+  font-family: inherit;
+  text-decoration: none;
+  transition: 0.15s ease;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  &:active {
+    opacity: 0.92;
+  }
+`;
+
+export function Notification() {
+  return (
+    <NotificationContainer>
+      <NotificationContent>
+        <b>Делаем новую доку.</b> Собираем в ней все наши пакеты, уже сделали навигацию по&nbsp;разделам, управление
+        фича-флагами и&nbsp;добавили песочницу для&nbsp;валидаций. Тестируем и&nbsp;собираем обратную связь
+        до&nbsp;конца года. Используйте новую доку и рассказывайте нам в&nbsp;
+        <a href="https://chat.skbkontur.ru/kontur/channels/new-documentation-react-ui" target="_blank">
+          Маттермосте
+        </a>{' '}
+        как она вам.
+      </NotificationContent>
+      <NotificationButton href="https://ui.gitlab-pages.kontur.host/storybook-documentation/" target="_blank">
+        Попробовать
+      </NotificationButton>
+    </NotificationContainer>
+  );
+}

packages/react-ui-validations/docs/Layout.tsx

@@ -1,8 +1,10 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import Helmet from 'react-helmet';
 import { NavLink, useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 
+import { checkNewDocsAccess } from './checkNewDocsAccess';
+import { Notification } from './Common/Notification';
 import { Displaying } from './Pages/Displaying';
 import { Validator } from './Pages/Validator';
 import { Examples } from './Pages/Examples';
@@ -14,10 +16,21 @@ export const Layout: React.FC<React.PropsWithChildren> = (props) => {
     window.scrollTo(0, 0);
   }, [navigate]);
 
+  const [hasNewDocsAccess, setHasNewDocsAccess] = useState(false);
+
+  useEffect(() => {
+    checkNewDocsAccess().then((status) => {
+      setHasNewDocsAccess(status);
+    });
+  }, []);
+
   return (
     <Root>
       <Helmet defaultTitle="React-UI Validations" titleTemplate="%s | React-UI Validations" />
+
+      {hasNewDocsAccess && <Notification />}
       <NavigationBar>
+        {hasNewDocsAccess && <div style={{ height: 40 }} />}
         <MainHeader>
           <h3>react-ui-validations</h3>
         </MainHeader>

packages/react-ui-validations/docs/checkNewDocsAccess.ts

@@ -0,0 +1,17 @@
+export const checkNewDocsAccess = (): Promise<boolean> => {
+  return new Promise((resolve) => {
+    fetch('https://ui.gitlab-pages.kontur.host/storybook-documentation/', {
+      mode: 'cors',
+    })
+      .then((response) => {
+        if (response.ok) {
+          resolve(true);
+        } else {
+          resolve(false);
+        }
+      })
+      .catch(() => {
+        resolve(false);
+      });
+  });
+};

packages/react-ui/.styleguide/components/Notification/Notification.styles.ts

@@ -0,0 +1,65 @@
+import { css, memoizeStyle } from '../../../lib/theming/Emotion';
+
+export const styles = memoizeStyle({
+  notification() {
+    return css`
+      position: sticky;
+      z-index: 2;
+      top: 0;
+      left: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      align-items: flex-start;
+      box-sizing: border-box;
+      width: 100%;
+      margin: 0 auto;
+      padding: 16px 24px;
+      background: #ff4785;
+      color: white;
+      font-size: 16px;
+      line-height: 1.375;
+
+      @media screen and (min-width: 768px) {
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+      }
+    `;
+  },
+  notificationContent() {
+    return css`
+      max-width: 1080px;
+
+      a {
+        color: white;
+      }
+    `;
+  },
+  notificationButton() {
+    return css`
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      padding: 8px 16px;
+      border-radius: 6px;
+      background: #fff;
+      opacity: 0.955;
+      color: #222222;
+      font-size: 16px;
+      font-family: inherit;
+      text-decoration: none;
+      transition: 0.15s ease;
+
+      @media (hover) {
+        &:hover {
+          opacity: 1;
+        }
+      }
+
+      &:active {
+        opacity: 0.92;
+      }
+    `;
+  },
+});

packages/react-ui/.styleguide/components/Notification/Notification.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import { cx } from '../../../lib/theming/Emotion';
+
+import { styles } from './Notification.styles';
+
+export function Notification() {
+  return (
+    <div className={cx(styles.notification())}>
+      <div className={cx(styles.notificationContent())}>
+        <b>Делаем новую доку.</b> Собираем в ней все наши пакеты, уже сделали навигацию по&nbsp;разделам, управление
+        фича-флагами и&nbsp;добавили песочницу для&nbsp;валидаций. Тестируем и&nbsp;собираем обратную связь
+        до&nbsp;конца года. Используйте новую доку и рассказывайте нам в&nbsp;
+        <a href="https://chat.skbkontur.ru/kontur/channels/new-documentation-react-ui" target="_blank">
+          Маттермосте
+        </a>{' '}
+        как она вам.
+      </div>
+      <a
+        href="https://ui.gitlab-pages.kontur.host/storybook-documentation/"
+        className={cx(styles.notificationButton())}
+        target="_blank"
+      >
+        Попробовать
+      </a>
+    </div>
+  );
+}

packages/react-ui/.styleguide/components/Notification/checkNewDocsAccess.ts

@@ -0,0 +1,17 @@
+export const checkNewDocsAccess = (): Promise<boolean> => {
+  return new Promise((resolve) => {
+    fetch('https://ui.gitlab-pages.kontur.host/storybook-documentation/', {
+      mode: 'cors',
+    })
+      .then((response) => {
+        if (response.ok) {
+          resolve(true);
+        } else {
+          resolve(false);
+        }
+      })
+      .catch(() => {
+        resolve(false);
+      });
+  });
+};

packages/react-ui/.styleguide/components/StyleGuideWrapper/StyleGuideWrapper.styles.ts

@@ -14,32 +14,6 @@ export const styles = memoizeStyle({
       @media (max-width: 600px) {
         padding-left: 0;
       }
-
-      footer {
-        position: fixed;
-        top: 0;
-        right: 0;
-        width: 149px;
-        height: 149px;
-        z-index: 999;
-        a {
-          position: relative;
-          right: -37px;
-          top: -22px;
-          display: block;
-          width: 190px;
-          padding: 4px 0;
-          text-align: center;
-          color: rgb(255, 255, 255);
-          font-size: 15px;
-          background: rgb(238, 153, 0) none repeat scroll 0 0;
-          text-decoration: none;
-          text-shadow: rgba(0, 0, 0, 0.15) 0px -1px 0px;
-          transform-origin: 0 0 0;
-          transform: rotate(45deg);
-          cursor: pointer;
-        }
-      }
     `;
   },
   darkRoot(t: Theme) {
@@ -132,6 +106,13 @@ export const styles = memoizeStyle({
       padding: 40px 40px 0 !important;
     `;
   },
+  heading() {
+    return css`
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    `;
+  },
   sidebar() {
     return css`
       width: 300px;
@@ -142,6 +123,12 @@ export const styles = memoizeStyle({
       left: 0;
       bottom: 0;
       overflow: auto;
+      scrollbar-color: transparent transparent;
+      scrollbar-width: thin;
+
+      &:hover {
+        scrollbar-color: rgba(0, 0, 0, 0.8) transparent;
+      }
 
       @media (max-width: 600px) {
         position: static;
@@ -166,33 +153,22 @@ export const styles = memoizeStyle({
       }
     `;
   },
-  footer() {
+  sidebarNotice() {
     return css`
-      position: fixed;
-      top: 0;
-      right: 0;
-      width: 149px;
-      height: 149px;
-      z-index: 999;
+      padding-top: 72px;
+
+      @media (max-width: 1080px) {
+        padding-top: 110px;
+      }
+
+      @media (max-width: 768px) {
+        padding-top: 160px;
+      }
     `;
   },
-  footerLink() {
+  github() {
     return css`
-      position: relative;
-      right: -37px;
-      top: -22px;
-      display: block;
-      width: 190px;
-      padding: 4px 16px;
-      text-align: center;
-      color: rgb(255, 255, 255);
-      font-size: 15px;
-      background: rgb(238, 153, 0);
-      text-decoration: none;
-      text-shadow: rgb(0 0 0 / 15%) 0px -1px 0px;
-      transform-origin: 0 0;
-      transform: rotate(45deg);
-      cursor: pointer;
+      display: inline-block;
     `;
   },
 });