feat: add styles for each component example

newrelic · Jun 2, 2020 · b2ef503 · b2ef503
1 parent 7178aa5
commit b2ef503
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 5 deletions.
diff --git a/src/components/ComponentExample.js b/src/components/ComponentExample.js
@@ -1,22 +1,24 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import cx from 'classnames';
 import formatCode from '../utils/formatCode';
 import github from 'prism-react-renderer/themes/github';
 import { LiveEditor, LiveError, LiveProvider, LivePreview } from 'react-live';
+import styles from './ComponentExample.module.scss';
 
 const TRAILING_SEMI = /;\s*$/;
 
 const ComponentExample = ({ className, example }) => (
-  <div className={className}>
-    <h3>{example.label}</h3>
+  <div className={cx(styles.container, className)}>
+    <h3 className={styles.title}>{example.label}</h3>
     <LiveProvider
       scope={window.__NR1_SDK__.default}
       code={formatCode(example.sourceCode).replace(TRAILING_SEMI, '')}
       theme={github}
     >
-      <LivePreview />
+      <LivePreview className={styles.preview} />
       <LiveEditor />
-      <LiveError />
+      <LiveError className={styles.error} />
     </LiveProvider>
   </div>
 );

diff --git a/src/components/ComponentExample.module.scss b/src/components/ComponentExample.module.scss
@@ -0,0 +1,23 @@
+.container {
+  :global(.nr1-Docs-prettify) > * {
+    margin-right: 0.5rem;
+
+    &:not(:first-child) {
+      margin-left: 0.5rem;
+    }
+  }
+}
+
+.error {
+  color: white;
+  background: var(--color-red-400);
+  padding: 0.5rem 1rem;
+}
+
+.preview {
+  margin-bottom: 1rem;
+}
+
+.title {
+  margin-bottom: 1rem;
+}
diff --git a/src/components/styles.scss b/src/components/styles.scss
@@ -24,6 +24,17 @@
   --color-brand-800: #007e8a;
   --color-brand-900: #005054;
 
+  --color-red-050: #fcf3f3;
+  --color-red-100: #fce9e9;
+  --color-red-200: #f7c8c6;
+  --color-red-300: #ec847e;
+  --color-red-400: #e56059;
+  --color-red-500: #d8211a;
+  --color-red-600: #8e0000;
+  --color-red-700: #600;
+  --color-red-800: #390000;
+  --color-red-900: #1b0000;
+
   --boxshadow: 0px 2.76726px 2.21381px rgba(0, 85, 90, 0.0168687),
     0px 6.6501px 5.32008px rgba(0, 85, 90, 0.0242336),
     0px 12.5216px 10.0172px rgba(0, 85, 90, 0.03),
@@ -140,4 +151,5 @@ ul {
 
 li {
   margin-bottom: 1rem;
-}
+}
+