use typography in Step

Author: TheSonOfThomp

packages/wizard/src/WizardStep/WizardStep.styles.ts

@@ -1,20 +1,5 @@
 import { css } from '@leafygreen-ui/emotion';
 
-export const stepTitleStyles = css`
-  font-size: 24px;
-  font-weight: 600;
-  line-height: 1.33;
-  margin-bottom: 8px;
-  color: inherit;
-`;
-
-export const stepDescriptionStyles = css`
-  font-size: 16px;
-  line-height: 1.5;
-  margin-bottom: 24px;
-  color: inherit;
-`;
-
 export const stepContentStyles = css`
   /* Content styles */
 `;

packages/wizard/src/WizardStep/WizardStep.tsx

@@ -1,19 +1,15 @@
 import React from 'react';
 
-import {
-  stepContentStyles,
-  stepDescriptionStyles,
-  stepTitleStyles,
-} from './WizardStep.styles';
+import { Description, H3 } from '@leafygreen-ui/typography';
+
+import { stepContentStyles } from './WizardStep.styles';
 import { WizardStepProps } from './WizardStep.types';
 
 export function WizardStep({ title, description, children }: WizardStepProps) {
   return (
     <div>
-      <div className={stepTitleStyles}>{title}</div>
-      {description && (
-        <div className={stepDescriptionStyles}>{description}</div>
-      )}
+      <H3>{title}</H3>
+      {description && <Description>{description}</Description>}
       <div className={stepContentStyles}>{children}</div>
     </div>
   );