chore(site): add banner on site

README.md

@@ -2,6 +2,9 @@
 
 DevExtreme Reactive is a set of business React components that deeply integrate with Bootstrap and Material-UI libraries.
 
+## This project is not in development. We continue to support and fix bugs in it
+We are currently investigating the possibility of making our [DevExtreme](https://github.com/DevExpress/DevExtreme) components [native](https://github.com/DevExpress/DevExtreme/issues/16468). They will replace DevExtreme Reactive components. To create a new application, use [devextreme react](https://github.com/DevExpress/devextreme-react). We are now working on migration guides for those who already have applications based on Reactive to make the migration easier.
+
 ## Common Features
 
 - Composable and extendable plugin-based architecture

packages/dx-site/src/components/docs/survey-header-addon.jsx → packages/dx-site/src/components/docs/header-addon.jsx

@@ -1,10 +1,11 @@
 /* globals document */
 import * as React from 'react';
-import styles from './survey-header-addon.module.scss';
+import * as PropTypes from 'prop-types';
+import styles from './header-addon.module.scss';
 
-const COOKIE_ID = 'dx-cookie-survey';
+const COOKIE_ID = 'dx-cookie-header-addon';
 
-const SurveyHeaderAddon = React.memo(() => {
+const HeaderAddon = React.memo(({ spanText, link, linkText }) => {
   const [shown, setShown] = React.useState(typeof document !== 'undefined' && document.cookie.indexOf(COOKIE_ID) === -1);
 
   const onClick = React.useCallback(() => {
@@ -23,17 +24,17 @@ const SurveyHeaderAddon = React.memo(() => {
           >
             <div className="col-auto">
               <span>
-                Help us make our products better.
+                {spanText}
               </span>
               <span className={`col-auto ${styles.underline}`}>
-                <a target="_blank" rel="noopener noreferrer" href="https://www.devexpress.com/web/devextreme-noncustomer-survey.xml" className={styles.link}>
-                  Take our 5 minute survey.
+                <a target="_blank" rel="noopener noreferrer" href={link} className={styles.link}>
+                  {linkText}
                 </a>
               </span>
             </div>
             {/* eslint-disable-next-line */}
             <span onClick={onClick} className={`col-auto align-self-end ${styles.underline}`}>
-              Dismiss
+            Dismiss
             </span>
           </div>
         </div>
@@ -42,4 +43,10 @@ const SurveyHeaderAddon = React.memo(() => {
   } return null;
 });
 
-export default SurveyHeaderAddon;
+HeaderAddon.propTypes = {
+  spanText: PropTypes.string.isRequired,
+  linkText: PropTypes.string.isRequired,
+  link: PropTypes.string.isRequired,
+};
+
+export default HeaderAddon;

packages/dx-site/src/components/docs/header-addon.module.scss

@@ -0,0 +1,20 @@
+.main {
+    width: 100%;
+    background-color: rgb(95, 208, 238);
+    color: #114e5f;
+  }
+
+  .underline {
+    padding-right: 20px;
+    text-decoration: underline;
+    cursor: pointer;
+  }
+
+  .row {
+    justify-content: space-between;
+    margin: 0px;
+  }
+
+  .link {
+    color: #114e5f !important;
+  }

packages/dx-site/src/components/layouts/page-layout.jsx

@@ -5,7 +5,7 @@ import Header from '../header';
 import VersionLink from '../docs/version-link';
 import LandingProductLinks from '../landing/product-links';
 import ContentContainer from './content-container';
-// import SurveyHeaderAddon from '../docs/survey-header-addon';
+import HeaderAddon from '../docs/header-addon';
 
 class PageLayout extends React.PureComponent {
   static propTypes = {
@@ -29,7 +29,9 @@ class PageLayout extends React.PureComponent {
               <LandingProductLinks />
             </>
           )}
-          // addon={<SurveyHeaderAddon />}
+          addon={
+            <HeaderAddon link="https://github.com/DevExpress/devextreme-reactive/blob/master/README.md#this-project-is-not-in-development-we-continue-to-support-and-fix-bugs-in-it" spanText="Devextreme Reactive development is not in progress now." linkText="See details." />
+          }
         />
         <ContentContainer>
           {children}