From 3cef6ee34dc40215214f99c8f2e06ef0805d960f Mon Sep 17 00:00:00 2001
From: Justin Hall <justin.r.hall@gmail.com>
Date: Wed, 2 Dec 2020 11:15:59 -0700
Subject: [PATCH] chore(deps): explicitly include className prop on stylable
 components

...and specify jsxImportSource for TypeScript.

@see https://emotion.sh/docs/emotion-11#css-prop-types
@see https://github.com/emotion-js/emotion/issues/2111#issuecomment-732763318
---
 src/components/legend.tsx     | 14 ++++++++++++--
 src/components/pwned-info.tsx | 11 +++++++----
 src/components/results.tsx    |  8 +++++++-
 src/emotion.d.ts              |  7 -------
 tsconfig.json                 |  3 ++-
 5 files changed, 28 insertions(+), 15 deletions(-)
 delete mode 100644 src/emotion.d.ts

diff --git a/src/components/legend.tsx b/src/components/legend.tsx
index ac13da79..bc52810a 100644
--- a/src/components/legend.tsx
+++ b/src/components/legend.tsx
@@ -3,13 +3,19 @@ import { ColorMap, LabelMap } from '../legend';
 import LegendItem from './legend-item';
 
 interface LegendProps {
+  className?: string;
   colors: ColorMap;
   labels: LabelMap;
 }
 
-function Legend({ colors, labels, ...props }: LegendProps): JSX.Element {
+function Legend({
+  className,
+  colors,
+  labels,
+  ...props
+}: LegendProps): JSX.Element {
   return (
-    <section data-testid="legend" {...props}>
+    <section data-testid="legend" className={className} {...props}>
       <p>Legend:</p>
       <LegendItem color={colors.number} label={labels.number} />
       <LegendItem color={colors.uppercase} label={labels.uppercase} />
@@ -19,4 +25,8 @@ function Legend({ colors, labels, ...props }: LegendProps): JSX.Element {
   );
 }
 
+Legend.defaultProps = {
+  className: '',
+};
+
 export default Legend;
diff --git a/src/components/pwned-info.tsx b/src/components/pwned-info.tsx
index 291b6596..2a19e1c2 100644
--- a/src/components/pwned-info.tsx
+++ b/src/components/pwned-info.tsx
@@ -104,11 +104,13 @@ const pwnedInfoMachine = createMachine<
 );
 
 interface PwnedInfoProps {
+  className?: string;
   // delayLoadingMs: number;
   password: string;
 }
 
 function PwnedInfo({
+  className,
   /* delayLoadingMs, */ password,
   ...props
 }: PwnedInfoProps): JSX.Element {
@@ -120,7 +122,7 @@ function PwnedInfo({
   }, [send, password]);
 
   return (
-    <section data-testid="pwned-info" {...props}>
+    <section data-testid="pwned-info" className={className} {...props}>
       <p>Public Exposure:</p>
       {error ? (
         <p>
@@ -145,8 +147,9 @@ function PwnedInfo({
   );
 }
 
-// PwnedInfo.defaultProps = {
-//   delayLoadingMs: 750,
-// };
+PwnedInfo.defaultProps = {
+  className: '',
+  // delayLoadingMs: 750,
+};
 
 export default PwnedInfo;
diff --git a/src/components/results.tsx b/src/components/results.tsx
index bc92c417..a712eae8 100644
--- a/src/components/results.tsx
+++ b/src/components/results.tsx
@@ -12,6 +12,7 @@ const AdditionalInfo = styled.section`
 `;
 
 interface ResultsProps {
+  className?: string;
   colors: ColorMap;
   labels: LabelMap;
   passwordInput: string;
@@ -19,6 +20,7 @@ interface ResultsProps {
 }
 
 function Results({
+  className,
   colors,
   labels,
   passwordInput,
@@ -26,7 +28,7 @@ function Results({
   ...props
 }: ResultsProps): JSX.Element {
   return (
-    <section data-testid="results" {...props}>
+    <section data-testid="results" className={className} {...props}>
       <PasswordThroughLense
         colors={colors}
         labels={labels}
@@ -53,4 +55,8 @@ function Results({
   );
 }
 
+Results.defaultProps = {
+  className: '',
+};
+
 export default Results;
diff --git a/src/emotion.d.ts b/src/emotion.d.ts
deleted file mode 100644
index 34780466..00000000
--- a/src/emotion.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-// TODO: remove once gatsby-plugin-emotion drops @emotion/babel-preset-css-prop
-// and switches to @emotion/babel-plugin. The former forces the classic JSX
-// runtime.
-//
-// @see https://emotion.sh/docs/emotion-11#css-prop-types
-
-/// <reference types="@emotion/react/types/css-prop" />
diff --git a/tsconfig.json b/tsconfig.json
index bd03e1b0..05ec6880 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,7 +2,8 @@
   "compilerOptions": {
     "target": "esnext",
     "moduleResolution": "node",
-    "jsx": "react",
+    "jsx": "react-jsx",
+    "jsxImportSource": "@emotion/react",
     "esModuleInterop": true,
     "noEmit": true,
     "strict": true,