Add exports for EuiSteps and related components types

CHANGELOG.md

@@ -7,6 +7,7 @@
 - Updated `EuiImage`'s `caption` prop type from `string` to `ReactNode` ([#3387](https://github.com/elastic/eui/pull/3387))
 - Improved contrast for `EuiCollapsibleNav` close button ([#3465](https://github.com/elastic/eui/pull/3465))
 - Fixed `EuiCodeEditor` console error when using the editor without import the default theme ([#3454](https://github.com/elastic/eui/pull/3454))
+- Added exports for `EuiSteps` and related components types ([#3471](https://github.com/elastic/eui/pull/3471))
 
 **Bug Fixes**
 

src/components/steps/index.ts

@@ -17,12 +17,19 @@
  * under the License.
  */
 
-export { EuiStep } from './step';
+export { EuiStep, EuiStepProps } from './step';
 
-export { EuiSteps } from './steps';
+export { EuiSteps, EuiStepsProps } from './steps';
 
-export { EuiSubSteps } from './sub_steps';
+export { EuiSubSteps, EuiSubStepsProps } from './sub_steps';
 
-export { EuiStepsHorizontal } from './steps_horizontal';
+export {
+  EuiStepsHorizontal,
+  EuiStepsHorizontalProps,
+} from './steps_horizontal';
 
-export { EuiStepStatus } from './step_number';
+export {
+  EuiStepStatus,
+  EuiStepNumber,
+  EuiStepNumberProps,
+} from './step_number';

src/components/steps/step.tsx

@@ -28,7 +28,7 @@ import { EuiStepStatus, EuiStepNumber } from './step_number';
 
 import { EuiI18n } from '../i18n';
 
-export interface EuiStepProps {
+export interface EuiStepInterface {
   children: ReactNode;
   /**
    * The HTML tag used for the title
@@ -49,11 +49,11 @@ export interface EuiStepProps {
   titleSize?: Exclude<EuiTitleProps['size'], 'xxxs' | 'xxs' | 'l'>;
 }
 
-export type StandaloneEuiStepProps = CommonProps &
+export type EuiStepProps = CommonProps &
   HTMLAttributes<HTMLDivElement> &
-  EuiStepProps;
+  EuiStepInterface;
 
-export const EuiStep: FunctionComponent<StandaloneEuiStepProps> = ({
+export const EuiStep: FunctionComponent<EuiStepProps> = ({
   className,
   children,
   headingElement = 'p',

src/components/steps/step_horizontal.tsx

@@ -30,7 +30,9 @@ import { EuiScreenReaderOnly, EuiKeyboardAccessible } from '../accessibility';
 
 import { EuiStepStatus, EuiStepNumber } from './step_number';
 
-export interface EuiStepHorizontalProps {
+export interface EuiStepHorizontalProps
+  extends CommonProps,
+    HTMLAttributes<HTMLDivElement> {
   /**
    * Is the current step
    */
@@ -53,9 +55,7 @@ export interface EuiStepHorizontalProps {
   status?: EuiStepStatus;
 }
 
-export const EuiStepHorizontal: FunctionComponent<
-  CommonProps & HTMLAttributes<HTMLDivElement> & EuiStepHorizontalProps
-> = ({
+export const EuiStepHorizontal: FunctionComponent<EuiStepHorizontalProps> = ({
   className,
   step = 1,
   title,

src/components/steps/step_number.tsx

@@ -22,7 +22,7 @@ import classNames from 'classnames';
 
 import { EuiIcon } from '../icon';
 
-import { StandaloneEuiStepProps } from './step';
+import { EuiStepProps } from './step';
 
 import { EuiI18n } from '../i18n';
 import { CommonProps, keysOf } from '../common';
@@ -44,7 +44,9 @@ export type EuiStepStatus =
   | 'danger'
   | 'disabled';
 
-export interface EuiStepNumberProps {
+export interface EuiStepNumberProps
+  extends CommonProps,
+    HTMLAttributes<HTMLDivElement> {
   /**
    * May replace the number provided in props.number with alternate styling
    */
@@ -57,14 +59,17 @@ export interface EuiStepNumberProps {
   /**
    * Title sizing equivalent to EuiTitle, but only `m`, `s` and `xs`. Defaults to `s`
    */
-  titleSize?: StandaloneEuiStepProps['titleSize'];
+  titleSize?: EuiStepProps['titleSize'];
 }
 
-export const EuiStepNumber: FunctionComponent<
-  CommonProps & HTMLAttributes<HTMLDivElement> & EuiStepNumberProps
-  // Note - tslint:disable refers to the `number` as it conflicts with the build in number type
-  // tslint:disable-next-line:variable-name
-> = ({ className, status, number, isHollow, titleSize, ...rest }) => {
+export const EuiStepNumber: FunctionComponent<EuiStepNumberProps> = ({
+  className,
+  status,
+  number,
+  isHollow,
+  titleSize,
+  ...rest
+}) => {
   const classes = classNames(
     'euiStepNumber',
     status ? statusToClassNameMap[status] : undefined,

src/components/steps/steps.tsx

@@ -21,11 +21,13 @@ import React, { FunctionComponent, HTMLAttributes } from 'react';
 import { CommonProps } from '../common';
 import classNames from 'classnames';
 
-import { StandaloneEuiStepProps, EuiStep } from './step';
+import { EuiStepProps, EuiStep } from './step';
 
-export type EuiContainedStepProps = Omit<StandaloneEuiStepProps, 'step'>;
+export type EuiContainedStepProps = Omit<EuiStepProps, 'step'>;
 
-export interface EuiStepsProps {
+export interface EuiStepsProps
+  extends CommonProps,
+    HTMLAttributes<HTMLDivElement> {
   /**
    * An array of `EuiStep` objects excluding the `step` prop
    */
@@ -41,14 +43,14 @@ export interface EuiStepsProps {
   /**
    * Title sizing equivalent to EuiTitle, but only `m`, `s` and `xs`. Defaults to `s`
    */
-  titleSize?: StandaloneEuiStepProps['titleSize'];
+  titleSize?: EuiStepProps['titleSize'];
 }
 
 function renderSteps(
   steps: EuiContainedStepProps[],
   firstStepNumber: number,
   headingElement: string,
-  titleSize?: StandaloneEuiStepProps['titleSize']
+  titleSize?: EuiStepProps['titleSize']
 ) {
   return steps.map((step, index) => {
     const { className, children, title, status, ...rest } = step;
@@ -69,9 +71,7 @@ function renderSteps(
   });
 }
 
-export const EuiSteps: FunctionComponent<
-  CommonProps & HTMLAttributes<HTMLDivElement> & EuiStepsProps
-> = ({
+export const EuiSteps: FunctionComponent<EuiStepsProps> = ({
   className,
   firstStepNumber = 1,
   headingElement = 'p',

src/components/steps/steps_horizontal.tsx

@@ -25,7 +25,9 @@ import { EuiStepHorizontalProps, EuiStepHorizontal } from './step_horizontal';
 
 type ContainedEuiStepHorizontalProps = Omit<EuiStepHorizontalProps, 'step'>;
 
-export interface EuiStepsHorizontalProps {
+export interface EuiStepsHorizontalProps
+  extends CommonProps,
+    HTMLAttributes<HTMLDivElement> {
   /**
    * An array of `EuiStepHorizontal` objects excluding the `step` prop
    */
@@ -38,9 +40,11 @@ function renderHorizontalSteps(steps: ContainedEuiStepHorizontalProps[]) {
   });
 }
 
-export const EuiStepsHorizontal: FunctionComponent<
-  CommonProps & HTMLAttributes<HTMLDivElement> & EuiStepsHorizontalProps
-> = ({ className, steps, ...rest }) => {
+export const EuiStepsHorizontal: FunctionComponent<EuiStepsHorizontalProps> = ({
+  className,
+  steps,
+  ...rest
+}) => {
   const classes = classNames('euiStepsHorizontal', className);
 
   return (