EuiStepNumber code review

elastic · May 13, 2019 · 229adde · 229adde
1 parent 75fee43
commit 229adde
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 49 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Converted `EuiStepNumber` to TS ([#1893](https://github.com/elastic/eui/pull/1893))
 - Converted `pretty_interval` to TS ([#1920](https://github.com/elastic/eui/pull/1920))
 - Converted `relative_options` to TS ([#1921](https://github.com/elastic/eui/pull/1921))
 - Added width to `EuiFlexItem` when gutter in `EuiFlexGrid` is set to none. ([#1941](https://github.com/elastic/eui/pull/1941))

diff --git a/...ps/__snapshots__/step_number.test.js.snap → ...s/__snapshots__/step_number.test.tsx.snap b/...ps/__snapshots__/step_number.test.js.snap → ...s/__snapshots__/step_number.test.tsx.snap
@@ -22,7 +22,6 @@ exports[`EuiStepNumber props status complete is rendered 1`] = `
     class="euiIcon euiIcon--medium euiIcon-isLoading euiStepNumber__icon"
     focusable="false"
     height="16"
-    title="complete"
     viewBox="0 0 16 16"
     width="16"
     xmlns="http://www.w3.org/2000/svg"
@@ -38,7 +37,6 @@ exports[`EuiStepNumber props status danger is rendered 1`] = `
     class="euiIcon euiIcon--medium euiIcon-isLoading euiStepNumber__icon"
     focusable="false"
     height="16"
-    title="has errors"
     viewBox="0 0 16 16"
     width="16"
     xmlns="http://www.w3.org/2000/svg"
@@ -70,7 +68,6 @@ exports[`EuiStepNumber props status warning is rendered 1`] = `
     class="euiIcon euiIcon--medium euiIcon-isLoading euiStepNumber__icon"
     focusable="false"
     height="16"
-    title="has warnings"
     viewBox="0 0 16 16"
     width="16"
     xmlns="http://www.w3.org/2000/svg"

diff --git a/src/components/steps/__snapshots__/steps_horizontal.test.js.snap b/src/components/steps/__snapshots__/steps_horizontal.test.js.snap
@@ -27,7 +27,6 @@ exports[`EuiStepsHorizontal is rendered 1`] = `
         class="euiIcon euiIcon--medium euiIcon-isLoading euiStepNumber__icon"
         focusable="false"
         height="16"
-        title="complete"
         viewBox="0 0 16 16"
         width="16"
         xmlns="http://www.w3.org/2000/svg"

diff --git a/src/components/steps/step_number.test.js → src/components/steps/step_number.test.tsx b/src/components/steps/step_number.test.js → src/components/steps/step_number.test.tsx
diff --git a/src/components/steps/step_number.js → src/components/steps/step_number.tsx b/src/components/steps/step_number.js → src/components/steps/step_number.tsx
@@ -1,10 +1,11 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { FunctionComponent, HTMLAttributes } from 'react';
 import classNames from 'classnames';
 
 import { EuiIcon } from '../icon';
 
 import { EuiI18n } from '../i18n';
+import { CommonProps, keysOf } from '../common';
+import { EuiStepStatus } from '@elastic/eui';
 
 const statusToClassNameMap = {
   complete: 'euiStepNumber--complete',
@@ -14,18 +15,28 @@ const statusToClassNameMap = {
   disabled: 'euiStepNumber--disabled',
 };
 
-export const STATUS = Object.keys(statusToClassNameMap);
+export const STATUS = keysOf(statusToClassNameMap);
 
-export const EuiStepNumber = ({
-  className,
-  status,
-  number,
-  isHollow,
-  ...rest
-}) => {
+export interface EuiStepNumberProps {
+  /**
+   * May replace the number provided in props.number with alternate styling
+   */
+  status?: EuiStepStatus;
+  number?: number;
+  /**
+   * Uses a border and removes the step number
+   */
+  isHollow?: boolean;
+}
+
+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, ...rest }) => {
   const classes = classNames(
     'euiStepNumber',
-    statusToClassNameMap[status],
+    status ? statusToClassNameMap[status] : undefined,
     {
       'euiStepNumber-isHollow': isHollow,
     },
@@ -36,37 +47,19 @@ export const EuiStepNumber = ({
   if (status === 'complete') {
     numberOrIcon = (
       <EuiI18n token="euiStepNumber.isComplete" default="complete">
-        {isComplete => (
-          <EuiIcon
-            type="check"
-            className="euiStepNumber__icon"
-            title={isComplete}
-          />
-        )}
+        {() => <EuiIcon type="check" className="euiStepNumber__icon" />}
       </EuiI18n>
     );
   } else if (status === 'warning') {
     numberOrIcon = (
       <EuiI18n token="euiStepNumber.hasWarnings" default="has warnings">
-        {hasWarnings => (
-          <EuiIcon
-            type="alert"
-            className="euiStepNumber__icon"
-            title={hasWarnings}
-          />
-        )}
+        {() => <EuiIcon type="alert" className="euiStepNumber__icon" />}
       </EuiI18n>
     );
   } else if (status === 'danger') {
     numberOrIcon = (
       <EuiI18n token="euiStepNumber.hasErrors" default="has errors">
-        {hasErrors => (
-          <EuiIcon
-            type="cross"
-            className="euiStepNumber__icon"
-            title={hasErrors}
-          />
-        )}
+        {() => <EuiIcon type="cross" className="euiStepNumber__icon" />}
       </EuiI18n>
     );
   } else if (!isHollow) {
@@ -79,16 +72,3 @@ export const EuiStepNumber = ({
     </div>
   );
 };
-
-EuiStepNumber.propTypes = {
-  children: PropTypes.node,
-  /**
-   * May replace the number provided in props.number with alternate styling
-   */
-  status: PropTypes.oneOf(STATUS),
-  number: PropTypes.number,
-  /**
-   * Uses a border and removes the step number
-   */
-  isHollow: PropTypes.bool,
-};