From f64a22fbbf93029841c109e19ce9477ad5a7bb05 Mon Sep 17 00:00:00 2001 From: abrunner Date: Wed, 10 Nov 2021 16:05:45 -0600 Subject: [PATCH] feat: add initial super tile experiment --- .gitignore | 4 ++ gatsby-config.js | 1 + .../super_tiles/components/CodeStreamTile.js | 53 ++++++++++++++ .../components/GuidedInstallTile.js | 69 +++++++++++++++++++ .../super_tiles/components/SuperTile.js | 32 +++++++++ src/experiments/super_tiles/index.js | 36 ++++++++++ src/pages/instant-observability.js | 6 +- 7 files changed, 198 insertions(+), 3 deletions(-) create mode 100644 src/experiments/super_tiles/components/CodeStreamTile.js create mode 100644 src/experiments/super_tiles/components/GuidedInstallTile.js create mode 100644 src/experiments/super_tiles/components/SuperTile.js create mode 100644 src/experiments/super_tiles/index.js diff --git a/.gitignore b/.gitignore index 4e55c4a2a..e446e31ac 100644 --- a/.gitignore +++ b/.gitignore @@ -70,3 +70,7 @@ yarn-error.log # In case npm is accidently used to install deps package-lock.json + +# VSCode files +.vscode + diff --git a/gatsby-config.js b/gatsby-config.js index eb6db845e..626bcb675 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -47,6 +47,7 @@ module.exports = { features: { 'developer-website_global-header-gh-buttons': 'on', 'developer-website_right-rail-buttons': 'outline', + super_tiles: 'on', }, core: { authorizationKey: process.env.SPLITIO_AUTH_KEY || 'localhost', diff --git a/src/experiments/super_tiles/components/CodeStreamTile.js b/src/experiments/super_tiles/components/CodeStreamTile.js new file mode 100644 index 000000000..8c0cbde22 --- /dev/null +++ b/src/experiments/super_tiles/components/CodeStreamTile.js @@ -0,0 +1,53 @@ +import React from 'react'; +import { css } from '@emotion/react'; +import SuperTile from './SuperTile'; +import { Button } from '@newrelic/gatsby-theme-newrelic'; + +const CodeStreamTile = () => { + return ( + +
+
+ + Tools & Communications + +

+ Introducing CodeStream +

+ + CodeStream supercharges development workflows by putting + collaboration tools in your IDE. + +
+
+ +
+
+ + ); +}; + +export default CodeStreamTile; diff --git a/src/experiments/super_tiles/components/GuidedInstallTile.js b/src/experiments/super_tiles/components/GuidedInstallTile.js new file mode 100644 index 000000000..71553907b --- /dev/null +++ b/src/experiments/super_tiles/components/GuidedInstallTile.js @@ -0,0 +1,69 @@ +import React from 'react'; +import { css } from '@emotion/react'; +import SuperTile from './SuperTile'; +import { Button } from '@newrelic/gatsby-theme-newrelic'; + +const GuidedInstallTile = () => { + return ( + +
+
+ + First Steps + +

+ Guided Install +

+ + Install the New Relic agent with a single command line and start + monitoring your log and infrastructure data in real time. + +
+
+ +
+
+ + ); +}; + +export default GuidedInstallTile; diff --git a/src/experiments/super_tiles/components/SuperTile.js b/src/experiments/super_tiles/components/SuperTile.js new file mode 100644 index 000000000..ee8c1782d --- /dev/null +++ b/src/experiments/super_tiles/components/SuperTile.js @@ -0,0 +1,32 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { css } from '@emotion/react'; + +const SuperTile = ({ children, className, type }) => { + return ( +
+ {children} +
+ ); +}; + +SuperTile.propTypes = { + type: PropTypes.string, + children: PropTypes.node.isRequired, + className: PropTypes.string, +}; + +export default SuperTile; diff --git a/src/experiments/super_tiles/index.js b/src/experiments/super_tiles/index.js new file mode 100644 index 000000000..312359641 --- /dev/null +++ b/src/experiments/super_tiles/index.js @@ -0,0 +1,36 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { css } from '@emotion/react'; +import useTreatment from '../../hooks/useTreatment'; +import IOBanner from '../../components/IOBanner'; +import CodeStreamTile from './components/CodeStreamTile'; +import GuidedInstallTile from './components/GuidedInstallTile'; + +const SuperTilesExperiment = ({ isMobile }) => { + const { treatment } = useTreatment('super_tiles'); + + if (treatment === 'on') { + return ( +
+ + +
+ ); + } + + return ; +}; + +SuperTilesExperiment.propTypes = { + isMobile: PropTypes.bool, +}; + +export default SuperTilesExperiment; diff --git a/src/pages/instant-observability.js b/src/pages/instant-observability.js index 6d37a836a..34c09f766 100644 --- a/src/pages/instant-observability.js +++ b/src/pages/instant-observability.js @@ -7,7 +7,6 @@ import { css } from '@emotion/react'; import SegmentedControl from '../components/SegmentedControl'; import Overlay from '../components/Overlay'; import PackTile from '../components/PackTile'; -import IOBanner from '../components/IOBanner'; import IOLogo from '../components/IOLogo'; import QuickstartFilter from '../components/quickstarts/QuickstartFilter'; import { @@ -23,6 +22,7 @@ import BUILD_YOUR_OWN from '../images/build-your-own.svg'; import GUIDED_INSTALL from '../images/guided-install.svg'; import { useDebounce } from 'react-use'; import { sortFeaturedQuickstarts } from '../utils/sortFeaturedQuickstarts'; +import SuperTilesExperiment from '../experiments/super_tiles'; import { QUICKSTARTS_REPO, @@ -294,7 +294,7 @@ const QuickstartsPage = ({ data, location }) => { } `} > - {isMobile && } + {isMobile && }
{ padding: var(--site-content-padding); `} > - {!isMobile && } + {!isMobile && }