From b2f37e603ae264a0468cbd615b51395c47def71a Mon Sep 17 00:00:00 2001
From: Jerel Miller <jmiller@newrelic.com>
Date: Tue, 16 Jun 2020 21:00:37 -0700
Subject: [PATCH] feat: Create a SkewedContainer component

---
 src/components/SkewedContainer.js          | 17 +++++++++++++++++
 src/components/SkewedContainer.module.scss |  8 ++++++++
 2 files changed, 25 insertions(+)
 create mode 100644 src/components/SkewedContainer.js
 create mode 100644 src/components/SkewedContainer.module.scss

diff --git a/src/components/SkewedContainer.js b/src/components/SkewedContainer.js
new file mode 100644
index 000000000..d372287d8
--- /dev/null
+++ b/src/components/SkewedContainer.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import styles from './SkewedContainer.module.scss';
+
+const SkewedContainer = ({ className, children }) => (
+  <div className={cx(styles.container, className)}>
+    <div className={styles.content}>{children}</div>
+  </div>
+);
+
+SkewedContainer.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node,
+};
+
+export default SkewedContainer;
diff --git a/src/components/SkewedContainer.module.scss b/src/components/SkewedContainer.module.scss
new file mode 100644
index 000000000..d26d0911e
--- /dev/null
+++ b/src/components/SkewedContainer.module.scss
@@ -0,0 +1,8 @@
+.container {
+  background: var(--color-neutrals-100);
+  transform: skew(0, -2deg);
+}
+
+.content {
+  transform: skew(0, 2deg);
+}