adds TextNode

Author: TheSonOfThomp

packages/wizard/src/WizardStep/TextNode.tsx

@@ -0,0 +1,31 @@
+import React, { PropsWithChildren } from 'react';
+import { Polymorph, PolymorphicAs } from '@leafygreen-ui/polymorphic';
+
+/**
+ * Wraps a string in the provided `as` component,
+ * or renders the provided `ReactNode`.
+ *
+ * Useful when rendering `children` props that can be any react node
+ *
+ * @example
+ * ```
+ * <TextNode as={h1}>Hello!</TextNode> // <h1>Hello!</h1>
+ * ```
+ *
+ * @example
+ * ```
+ * <TextNode><h2>Hello!</h2></TextNode> // <h2>Hello!</h2>
+ * ```
+ *
+ */
+// TODO: Move to `Typography`
+export const TextNode = ({
+  children,
+  as,
+}: PropsWithChildren<{ as?: PolymorphicAs }>) => {
+  return typeof children === 'string' || typeof children === 'number' ? (
+    <Polymorph as={as}>{children}</Polymorph>
+  ) : (
+    children
+  );
+};

packages/wizard/src/WizardStep/WizardStep.tsx

@@ -1,18 +1,20 @@
 import React from 'react';
 
-import { Description, H3 } from '@leafygreen-ui/typography';
+import { TextNode, Description, H3 } from '@leafygreen-ui/typography';
 
 import { stepStyles } from './WizardStep.styles';
 import { WizardStepProps } from './WizardStep.types';
+import { WizardSubComponentProperties } from '../constants';
 
 export function WizardStep({ title, description, children }: WizardStepProps) {
   return (
     <div className={stepStyles}>
-      <H3>{title}</H3>
-      {description && <Description>{description}</Description>}
+      <TextNode as={H3}>{title}</TextNode>
+      {description && <TextNode as={Description}>{description}</TextNode>}
       <div>{children}</div>
     </div>
   );
 }
 
 WizardStep.displayName = 'WizardStep';
+WizardStep[WizardSubComponentProperties.Step] = true;