From 70fe9c65b4929c9f6f75537e371c46cd72cba8de Mon Sep 17 00:00:00 2001
From: Michael Dougall <mdougall@atlassian.com>
Date: Fri, 5 Mar 2021 22:08:26 +1100
Subject: [PATCH] chore: resolves code review comments

---
 examples/with-compiled-css/.babelrc                         | 3 +--
 .../{pages => components}/class-names-box.js                | 3 ++-
 .../{pages => components}/styled-button.js                  | 1 -
 examples/with-compiled-css/pages/index.js                   | 6 +++---
 examples/with-compiled-css/{pages => style}/colors.js       | 0
 5 files changed, 6 insertions(+), 7 deletions(-)
 rename examples/with-compiled-css/{pages => components}/class-names-box.js (81%)
 rename examples/with-compiled-css/{pages => components}/styled-button.js (91%)
 rename examples/with-compiled-css/{pages => style}/colors.js (100%)

diff --git a/examples/with-compiled-css/.babelrc b/examples/with-compiled-css/.babelrc
index f8ff435120cbd0..1ff94f7ed28e16 100644
--- a/examples/with-compiled-css/.babelrc
+++ b/examples/with-compiled-css/.babelrc
@@ -1,4 +1,3 @@
 {
-  "presets": ["@babel/preset-react"],
-  "plugins": ["@babel/plugin-syntax-jsx"]
+  "presets": ["next/babel"]
 }
diff --git a/examples/with-compiled-css/pages/class-names-box.js b/examples/with-compiled-css/components/class-names-box.js
similarity index 81%
rename from examples/with-compiled-css/pages/class-names-box.js
rename to examples/with-compiled-css/components/class-names-box.js
index 0d1ffd9f105485..67658c122059ef 100644
--- a/examples/with-compiled-css/pages/class-names-box.js
+++ b/examples/with-compiled-css/components/class-names-box.js
@@ -1,4 +1,5 @@
 import { ClassNames } from '@compiled/react'
+import { error } from '../style/colors'
 
 export const BoxStyles = ({ children }) => (
   <ClassNames>
@@ -8,7 +9,7 @@ export const BoxStyles = ({ children }) => (
           display: flex;
           width: 100px;
           height: 100px;
-          border: 1px solid red;
+          border: 1px solid ${error};
           padding: 8px;
           flex-direction: column;
         `,
diff --git a/examples/with-compiled-css/pages/styled-button.js b/examples/with-compiled-css/components/styled-button.js
similarity index 91%
rename from examples/with-compiled-css/pages/styled-button.js
rename to examples/with-compiled-css/components/styled-button.js
index 83a257f1ade0c5..bc3a2c58120fcd 100644
--- a/examples/with-compiled-css/pages/styled-button.js
+++ b/examples/with-compiled-css/components/styled-button.js
@@ -2,7 +2,6 @@ import { styled } from '@compiled/react'
 
 export const Button = styled.button`
   color: ${(props) => props.color};
-  border: 1px solid black;
   background-color: transparent;
   padding: 6px 8px;
   border-radius: 3px;
diff --git a/examples/with-compiled-css/pages/index.js b/examples/with-compiled-css/pages/index.js
index f68e12ad5508ce..3befff44a87d8a 100644
--- a/examples/with-compiled-css/pages/index.js
+++ b/examples/with-compiled-css/pages/index.js
@@ -1,7 +1,7 @@
 import '@compiled/react'
-import { BoxStyles } from './class-names-box'
-import { Button } from './styled-button'
-import { secondary, primary } from './colors'
+import { BoxStyles } from '../components/class-names-box'
+import { Button } from '../components/styled-button'
+import { secondary, primary } from '../style/colors'
 
 const IndexPage = () => (
   <BoxStyles>
diff --git a/examples/with-compiled-css/pages/colors.js b/examples/with-compiled-css/style/colors.js
similarity index 100%
rename from examples/with-compiled-css/pages/colors.js
rename to examples/with-compiled-css/style/colors.js