Add titleSize prop to EuiStep

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 - Added `showCloseButton` and `dockedBreakpoint` flexibility to `EuiCollapsibleNav` ([#3330](https://github.com/elastic/eui/pull/3330))
 - Added `panelStyle` prop to `EuiPopover` to distinguish style object configuration ([#3329](https://github.com/elastic/eui/pull/3329))
+- Added `titleSize` prop to `EuiStep` ([#3340](https://github.com/elastic/eui/pull/3340))
 
 **Bug Fixes**
 

src/components/steps/_steps.scss

@@ -22,6 +22,7 @@
 
 .euiStep__titleWrapper {
   display: flex;
+  align-items: center;
 }
 
 .euiStep__circle {

src/components/steps/step.tsx

@@ -22,7 +22,7 @@ import { CommonProps } from '../common';
 
 import classNames from 'classnames';
 
-import { EuiTitle } from '../title';
+import { EuiTitle, EuiTitleSize } from '../title';
 
 import { EuiStepStatus, EuiStepNumber } from './step_number';
 
@@ -43,6 +43,10 @@ export interface EuiStepProps {
    * May replace the number provided in props.step with alternate styling.
    */
   status?: EuiStepStatus;
+  /**
+   * Size of the title. See EuiTitle for options ('s', 'm', 'l'... etc)
+   */
+  titleSize?: EuiTitleSize;
 }
 
 export type StandaloneEuiStepProps = CommonProps &
@@ -55,6 +59,7 @@ export const EuiStep: FunctionComponent<StandaloneEuiStepProps> = ({
   headingElement = 'p',
   step = 1,
   title,
+  titleSize = 's',
   status,
   ...rest
 }) => {
@@ -81,7 +86,7 @@ export const EuiStep: FunctionComponent<StandaloneEuiStepProps> = ({
           )}
         </EuiI18n>
 
-        <EuiTitle size="s" className="euiStep__title">
+        <EuiTitle size={titleSize} className="euiStep__title">
           {React.createElement(headingElement, null, title)}
         </EuiTitle>
       </div>

src/components/steps/steps.tsx

@@ -46,7 +46,7 @@ function renderSteps(
   headingElement: string
 ) {
   return steps.map((step, index) => {
-    const { className, children, title, status, ...rest } = step;
+    const { className, children, title, titleSize, status, ...rest } = step;
 
     return (
       <EuiStep
@@ -55,6 +55,7 @@ function renderSteps(
         headingElement={headingElement}
         step={firstStepNumber + index}
         title={title}
+        titleSize={titleSize}
         status={status}
         {...rest}>
         {children}