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 emotion-js/emotion#2111 (comment)

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;

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;

src/components/results.tsx

@@ -12,21 +12,23 @@ const AdditionalInfo = styled.section`
 `;
 
 interface ResultsProps {
+  className?: string;
   colors: ColorMap;
   labels: LabelMap;
   passwordInput: string;
   passwordToCheck: string;
 }
 
 function Results({
+  className,
   colors,
   labels,
   passwordInput,
   passwordToCheck,
   ...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;

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,