feat: use dynamic breakpoint for side by side component based on layout

newrelic · Jul 30, 2020 · c0277d9 · c0277d9
1 parent fc8ec18
commit c0277d9
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 6 deletions.
diff --git a/src/components/SideBySide.js b/src/components/SideBySide.js
@@ -1,10 +1,17 @@
 import React, { Children, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
+import { css } from '@emotion/core';
 import styles from './SideBySide.module.scss';
 import splitUsing from '../utils/splitUsing';
 import splitWhen from '../utils/splitWhen';
 import { isMdxType } from '../utils/mdx';
+import usePageLayout from '../hooks/usePageLayout';
+
+const BREAKPOINTS = {
+  SINGLE_COLUMN: '1240px',
+  RELATED_CONTENT: '1520px',
+};
 
 const SideBySide = ({ className, children, type }) => {
   const types = Array.isArray(type) ? type : [type];
@@ -32,8 +39,18 @@ const SideBySide = ({ className, children, type }) => {
     )
   );
 
+  const pageLayout = usePageLayout();
+
   return (
-    <div className={cx(className, styles.container)}>
+    <div
+      css={css`
+        @media (max-width: ${BREAKPOINTS[pageLayout]}) {
+          grid-template-columns: minmax(0, 1fr);
+          grid-gap: 0;
+        }
+      `}
+      className={cx(className, styles.container)}
+    >
       {sections.map(([left, right], idx) => (
         <Fragment key={idx}>
           <div className={cx({ [styles.spanColumns]: !rendersRightColumn })}>

diff --git a/src/components/SideBySide.module.scss b/src/components/SideBySide.module.scss
@@ -6,11 +6,6 @@
   p:last-child {
     margin-bottom: 0;
   }
-
-  @media (max-width: 1240px) {
-    grid-template-columns: minmax(0, 1fr);
-    grid-gap: 0;
-  }
 }
 
 .spanColumns {