From be1d914201788b70f0e761ce25d80ef3a381fbd5 Mon Sep 17 00:00:00 2001
From: Jason Rundell <jason.rundell@gmail.com>
Date: Sun, 16 Apr 2023 23:22:15 -0400
Subject: [PATCH 1/2] Import change

---
 .storybook/main.js                          | 24 +++++++++++++++++++++
 src/stories/atoms/Article/index.jsx         |  2 +-
 src/stories/atoms/Avatar/index.jsx          |  2 +-
 src/stories/atoms/Box/index.jsx             |  2 +-
 src/stories/atoms/Button/index.jsx          |  2 +-
 src/stories/atoms/Container/index.jsx       |  2 +-
 src/stories/atoms/Heading/index.jsx         |  2 +-
 src/stories/atoms/Icon/index.jsx            |  2 +-
 src/stories/atoms/Link/index.jsx            |  2 +-
 src/stories/atoms/Paragraph/index.jsx       |  2 +-
 src/stories/atoms/Row/index.jsx             |  2 +-
 src/stories/atoms/Section/index.jsx         |  2 +-
 src/stories/atoms/Spacer/Spacer.stories.mdx |  4 +++-
 src/stories/atoms/Spacer/index.jsx          |  5 ++---
 src/stories/atoms/Strong/index.jsx          |  2 +-
 src/stories/organisms/Header/index.jsx      |  2 +-
 16 files changed, 42 insertions(+), 17 deletions(-)

diff --git a/.storybook/main.js b/.storybook/main.js
index b30e32a..034ba02 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -31,6 +31,30 @@ module.exports = {
       include: path.resolve(__dirname, '../src')
     })
 
+    // Add babel-loader for Emotion styles
+    config.module.rules.push({
+      test: /\.jsx?$/,
+      include: [path.resolve(__dirname, '../src')],
+      use: [
+        {
+          loader: 'babel-loader',
+          options: {
+            presets: [
+              '@babel/preset-react',
+              [
+                '@emotion/babel-preset-css-prop',
+                {
+                  autoLabel: 'dev-only',
+                  labelFormat: '[local]'
+                }
+              ]
+            ],
+            plugins: ['@babel/plugin-syntax-jsx']
+          }
+        }
+      ]
+    })
+
     // Return the altered config
     return config
   }
diff --git a/src/stories/atoms/Article/index.jsx b/src/stories/atoms/Article/index.jsx
index e86aba7..3e40228 100644
--- a/src/stories/atoms/Article/index.jsx
+++ b/src/stories/atoms/Article/index.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { css } from '@emotion/css'
+import { css } from '@emotion/react'
 
 export const Article = ({ id, classNames, children }) => {
   const style = css`
diff --git a/src/stories/atoms/Avatar/index.jsx b/src/stories/atoms/Avatar/index.jsx
index 54ba93f..38c23d1 100644
--- a/src/stories/atoms/Avatar/index.jsx
+++ b/src/stories/atoms/Avatar/index.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { css } from '@emotion/css'
+import { css } from '@emotion/react'
 
 import { Icon } from '../Icon'
 import { sizes, sizeKeys } from '../../../shared/sizes'
diff --git a/src/stories/atoms/Box/index.jsx b/src/stories/atoms/Box/index.jsx
index e376601..394e6f6 100644
--- a/src/stories/atoms/Box/index.jsx
+++ b/src/stories/atoms/Box/index.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { css } from '@emotion/css'
+import { css } from '@emotion/react'
 
 export const Box = ({ isTight, isRoomy, classNames, children }) => {
   const style = css`
diff --git a/src/stories/atoms/Button/index.jsx b/src/stories/atoms/Button/index.jsx
index a48c6cc..26de106 100644
--- a/src/stories/atoms/Button/index.jsx
+++ b/src/stories/atoms/Button/index.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { css } from '@emotion/css'
+import { css } from '@emotion/react'
 
 export const Button = ({ size, label, onClick, classNames }) => {
   const style = css`
diff --git a/src/stories/atoms/Container/index.jsx b/src/stories/atoms/Container/index.jsx
index 383afab..800e5cf 100644
--- a/src/stories/atoms/Container/index.jsx
+++ b/src/stories/atoms/Container/index.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { css } from '@emotion/css'
+import { css } from '@emotion/react'
 
 export const Container = ({ id, classNames, children }) => {
   const style = css`
diff --git a/src/stories/atoms/Heading/index.jsx b/src/stories/atoms/Heading/index.jsx
index cb02338..c82104a 100644
--- a/src/stories/atoms/Heading/index.jsx
+++ b/src/stories/atoms/Heading/index.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { css } from '@emotion/css'
+import { css } from '@emotion/react'
 
 import { sizes } from '../../../shared/sizes'
 
diff --git a/src/stories/atoms/Icon/index.jsx b/src/stories/atoms/Icon/index.jsx
index 8a44f7e..e0eb2e2 100644
--- a/src/stories/atoms/Icon/index.jsx
+++ b/src/stories/atoms/Icon/index.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { css } from '@emotion/css'
+import { css } from '@emotion/react'
 import { icons } from '../../../shared/icons'
 
 /**
diff --git a/src/stories/atoms/Link/index.jsx b/src/stories/atoms/Link/index.jsx
index 9486f27..c1d1ff0 100644
--- a/src/stories/atoms/Link/index.jsx
+++ b/src/stories/atoms/Link/index.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { css } from '@emotion/css'
+import { css } from '@emotion/react'
 
 export const Link = ({ href, label, onClick, target, rel, classNames }) => {
   const style = css`
diff --git a/src/stories/atoms/Paragraph/index.jsx b/src/stories/atoms/Paragraph/index.jsx
index 942aaa9..738a5e4 100644
--- a/src/stories/atoms/Paragraph/index.jsx
+++ b/src/stories/atoms/Paragraph/index.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { css } from '@emotion/css'
+import { css } from '@emotion/react'
 
 export const Paragraph = ({ classNames, children }) => {
   const style = css`
diff --git a/src/stories/atoms/Row/index.jsx b/src/stories/atoms/Row/index.jsx
index ea7e8d9..e8cce5e 100644
--- a/src/stories/atoms/Row/index.jsx
+++ b/src/stories/atoms/Row/index.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { css } from '@emotion/css'
+import { css } from '@emotion/react'
 
 export const Row = ({ justify, classNames, children }) => {
   const style = css`
diff --git a/src/stories/atoms/Section/index.jsx b/src/stories/atoms/Section/index.jsx
index c36479c..eeb8eb7 100644
--- a/src/stories/atoms/Section/index.jsx
+++ b/src/stories/atoms/Section/index.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { css } from '@emotion/css'
+import { css } from '@emotion/react'
 
 export const Section = ({ id, classNames, children }) => {
   const style = css`
diff --git a/src/stories/atoms/Spacer/Spacer.stories.mdx b/src/stories/atoms/Spacer/Spacer.stories.mdx
index bf0c5a1..7422dbd 100644
--- a/src/stories/atoms/Spacer/Spacer.stories.mdx
+++ b/src/stories/atoms/Spacer/Spacer.stories.mdx
@@ -222,6 +222,8 @@ export const Template = (args) => <Spacer {...args} />
 
 Experiment with this story with the Controls addon in the Canvas tab.
 
+{/* https://storybook.js.org/docs/react/api/mdx#play-function */}
+
 <Canvas>
   <Story
     name="controls"
@@ -231,9 +233,9 @@ Experiment with this story with the Controls addon in the Canvas tab.
       mediumScreen: 'small',
       largeScreen: 'small'
     }}
-    // https://storybook.js.org/docs/react/api/mdx#play-function
     play={async ({ canvasElement }) => {
       const expectedHeight = sizes.small * 16
+      console.log(expectedHeight)
       const theElement = canvasElement.querySelector('[aria-hidden="true"]')
       await expect(theElement).not.toBeNull()
       await expect(theElement.clientHeight).toEqual(expectedHeight)
diff --git a/src/stories/atoms/Spacer/index.jsx b/src/stories/atoms/Spacer/index.jsx
index 55a0d3d..d196603 100644
--- a/src/stories/atoms/Spacer/index.jsx
+++ b/src/stories/atoms/Spacer/index.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { css } from '@emotion/css'
+import { css } from '@emotion/react'
 
 import { sizes, sizeKeys } from '../../../shared/sizes'
 import { breakpoints } from '../../../shared/breakpoints'
@@ -8,7 +8,6 @@ import { breakpoints } from '../../../shared/breakpoints'
 export const Spacer = ({ smallScreen, mediumScreen, largeScreen }) => {
   const style = css`
     display: block;
-    background-color: pink;
     height: ${sizes[smallScreen] ?? sizes.normal}rem;
 
     @media (min-width: ${breakpoints.medium}rem) {
@@ -19,7 +18,7 @@ export const Spacer = ({ smallScreen, mediumScreen, largeScreen }) => {
       height: ${sizes[largeScreen] ?? sizes.normal}rem;
     }
   `
-
+  console.log(style)
   return <div css={style} aria-hidden="true" />
 }
 
diff --git a/src/stories/atoms/Strong/index.jsx b/src/stories/atoms/Strong/index.jsx
index 39b449a..0a0f460 100644
--- a/src/stories/atoms/Strong/index.jsx
+++ b/src/stories/atoms/Strong/index.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { css } from '@emotion/css'
+import { css } from '@emotion/react'
 
 export const Strong = ({ text, classNames }) => {
   const style = css`
diff --git a/src/stories/organisms/Header/index.jsx b/src/stories/organisms/Header/index.jsx
index f060613..bcb63b0 100644
--- a/src/stories/organisms/Header/index.jsx
+++ b/src/stories/organisms/Header/index.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { css } from '@emotion/css'
+import { css } from '@emotion/react'
 
 import { Button } from '../../atoms/Button'
 

From 18a0d04fe59ac983ce5249ff8189842575b57588 Mon Sep 17 00:00:00 2001
From: Jason Rundell <jason.rundell@gmail.com>
Date: Sun, 16 Apr 2023 23:23:42 -0400
Subject: [PATCH 2/2] Reverting main

---
 .storybook/main.js | 24 ------------------------
 1 file changed, 24 deletions(-)

diff --git a/.storybook/main.js b/.storybook/main.js
index 034ba02..b30e32a 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -31,30 +31,6 @@ module.exports = {
       include: path.resolve(__dirname, '../src')
     })
 
-    // Add babel-loader for Emotion styles
-    config.module.rules.push({
-      test: /\.jsx?$/,
-      include: [path.resolve(__dirname, '../src')],
-      use: [
-        {
-          loader: 'babel-loader',
-          options: {
-            presets: [
-              '@babel/preset-react',
-              [
-                '@emotion/babel-preset-css-prop',
-                {
-                  autoLabel: 'dev-only',
-                  labelFormat: '[local]'
-                }
-              ]
-            ],
-            plugins: ['@babel/plugin-syntax-jsx']
-          }
-        }
-      ]
-    })
-
     // Return the altered config
     return config
   }