[ASAP-378] - display AnalyticsMobilePage when mobile width (#4224)

* display AnayticsMobilePage when mobile width

* update Analytics page tests

* modify css instead

* modify paddingTop

* remove debug

* headline fontsize should be 26

packages/react-components/src/icons/desktop.tsx

@@ -0,0 +1,20 @@
+/* istanbul ignore file */
+
+const desktop = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={40}
+    height={37}
+    viewBox="0 0 40 37"
+    fill="none"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M0.5 2C0.5 1.17157 1.17157 0.5 2 0.5H38C38.8284 0.5 39.5 1.17157 39.5 2V27.5C39.5 28.3284 38.8284 29 38 29H21.5V33.5H28C28.8284 33.5 29.5 34.1716 29.5 35C29.5 35.8284 28.8284 36.5 28 36.5H12C11.1716 36.5 10.5 35.8284 10.5 35C10.5 34.1716 11.1716 33.5 12 33.5H18.5V29H2C1.17157 29 0.5 28.3284 0.5 27.5V2ZM3.5 3.5V26H36.5V3.5H3.5Z"
+      fill="#00202C"
+    />
+  </svg>
+);
+
+export default desktop;

packages/react-components/src/icons/index.ts

@@ -25,6 +25,7 @@ export { default as crossInCircleIcon } from './cross-in-circle';
 export { default as crossSmallIcon } from './cross-small';
 export { default as dashboardIcon } from './dashboard';
 export { default as dataset } from './dataset';
+export { default as deskTopIcon } from './desktop';
 export { default as discoverIcon } from './discover';
 export { default as docsIcon } from './docs';
 export { default as dropdownChevronIcon } from './dropdown-chevron';

packages/react-components/src/templates/AnalyticsMobilePage.tsx

@@ -0,0 +1,29 @@
+import { css } from '@emotion/react';
+
+import { Paragraph } from '../atoms';
+import { rem } from '../pixels';
+import { deskTopIcon } from '../icons';
+
+const containerStyles = css({
+  padding: `30vh ${rem(24)} 0`,
+  textAlign: 'center',
+});
+
+const headlineStyles = css({
+  fontSize: '26px',
+  margin: '16px 0',
+});
+const AnalyticsMobilePage: React.FC = () => (
+  <header css={containerStyles}>
+    <div>{deskTopIcon}</div>
+    <h3 css={headlineStyles}>
+      Analytics are only available on the desktop version.
+    </h3>
+    <Paragraph accent="lead">
+      To access all analytics features, please use the desktop version. We
+      apologize for any inconvenience this may cause.
+    </Paragraph>
+  </header>
+);
+
+export default AnalyticsMobilePage;

packages/react-components/src/templates/AnalyticsPage.tsx

@@ -2,18 +2,36 @@ import { ComponentProps } from 'react';
 import { css } from '@emotion/react';
 
 import AnalyticsPageHeader from './AnalyticsPageHeader';
+import AnalyticsMobilePage from './AnalyticsMobilePage';
 import { defaultPageLayoutPaddingStyle } from '../layout';
+import { mobileScreen } from '../pixels';
 
 const mainStyles = css({
   padding: defaultPageLayoutPaddingStyle,
 });
 
+const pageMobileStyles = css({
+  [`@media (min-width: ${mobileScreen.max}px)`]: {
+    display: 'none',
+  },
+});
+const pageDesktopStyles = css({
+  [`@media (max-width: ${mobileScreen.max}px)`]: {
+    display: 'none',
+  },
+});
+
 type AnalyticsPageProps = ComponentProps<typeof AnalyticsPageHeader>;
 
 const AnalyticsPage: React.FC<AnalyticsPageProps> = ({ children }) => (
   <article>
-    <AnalyticsPageHeader />
-    <main css={mainStyles}>{children}</main>
+    <div css={pageDesktopStyles}>
+      <AnalyticsPageHeader />
+      <main css={mainStyles}>{children}</main>
+    </div>
+    <div css={pageMobileStyles}>
+      <AnalyticsMobilePage />
+    </div>
   </article>
 );
 

packages/react-components/src/templates/__tests__/AnalyticsMobilePage.test.tsx

@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react';
+
+import AnalyticsMobilePage from '../AnalyticsMobilePage';
+
+it('renders the page', () => {
+  render(<AnalyticsMobilePage />);
+  expect(
+    screen.getByText(/Analytics are only available/, { selector: 'h3' }),
+  ).toBeVisible();
+});