Merge pull request #970 from newrelic/clark/update-sidebyside

feat: add ability to update background color on SidebySides with prop
newrelic · Jan 3, 2024 · ab9e41c · ab9e41c
2 parents db853c5 + 6a4cb92
commit ab9e41c
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/demo/src/pages/index.js b/demo/src/pages/index.js
@@ -425,7 +425,7 @@ const IndexPage = () => {
             />
             <br />
             <h2>Content displayed in two columns</h2>
-            <SideBySide>
+            <SideBySide backgroundColor>
               <Side>
                 <p>Lorem ipsum Lorem ipsum Lorem ipsum</p>
                 <CodeBlock language="json" lineNumbers>

diff --git a/packages/gatsby-theme-newrelic/src/components/SideBySide.js b/packages/gatsby-theme-newrelic/src/components/SideBySide.js
@@ -7,20 +7,26 @@ const BREAKPOINTS = {
   RELATED_CONTENT: '1520px',
 };
 
-const SideBySide = ({ children, className }) => {
+const SideBySide = ({ backgroundColor, children, className }) => {
   const childObjects = Children.toArray(children);
   const numberOfChildren = childObjects.length;
   const spacePercentage = 100 / numberOfChildren;
 
   return (
     <div
       css={css`
+        ${backgroundColor &&
+        css`
+          background: var(--primary-hover-color);
+        `}
+        border-radius: 0.25rem;
         display: grid;
         grid-gap: 1rem;
         grid-template-columns: repeat(
           ${numberOfChildren},
           calc(${spacePercentage}% - 0.5rem)
         );
+        padding: 1rem;
 
         p:last-child {
           margin-bottom: 0;
@@ -51,6 +57,7 @@ const SideBySide = ({ children, className }) => {
 };
 
 SideBySide.propTypes = {
+  backgroundColor: PropTypes.bool,
   className: PropTypes.string,
   children: PropTypes.node,
 };