From 3f36a3263d341c37d00209be963545b087f3431f Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Mon, 11 Dec 2017 14:01:50 -0700 Subject: [PATCH 1/6] add Steps component --- src-docs/src/services/routes/routes.js | 4 + src-docs/src/views/steps/steps.js | 59 +++++++ src-docs/src/views/steps/steps_example.js | 31 ++++ src/components/index.js | 4 + src/components/index.scss | 1 + .../steps/__snapshots__/steps.test.js.snap | 145 ++++++++++++++++++ src/components/steps/_index.scss | 1 + src/components/steps/_steps.scss | 27 ++++ src/components/steps/index.js | 3 + src/components/steps/step.js | 29 ++++ src/components/steps/steps.js | 46 ++++++ src/components/steps/steps.test.js | 40 +++++ 12 files changed, 390 insertions(+) create mode 100644 src-docs/src/views/steps/steps.js create mode 100644 src-docs/src/views/steps/steps_example.js create mode 100644 src/components/steps/__snapshots__/steps.test.js.snap create mode 100644 src/components/steps/_index.scss create mode 100644 src/components/steps/_steps.scss create mode 100644 src/components/steps/index.js create mode 100644 src/components/steps/step.js create mode 100644 src/components/steps/steps.js create mode 100644 src/components/steps/steps.test.js diff --git a/src-docs/src/services/routes/routes.js b/src-docs/src/services/routes/routes.js index 4970ea61e65..7aa6bfc6069 100644 --- a/src-docs/src/services/routes/routes.js +++ b/src-docs/src/services/routes/routes.js @@ -109,6 +109,9 @@ import { SideNavExample } import { SpacerExample } from '../../views/spacer/spacer_example'; +import { StepsExample } + from '../../views/steps/steps_example'; + import { TableExample } from '../../views/table/table_example'; @@ -200,6 +203,7 @@ const components = [ ProgressExample, SideNavExample, SpacerExample, + StepsExample, TableExample, TabsExample, TextExample, diff --git a/src-docs/src/views/steps/steps.js b/src-docs/src/views/steps/steps.js new file mode 100644 index 00000000000..7c9ac21b457 --- /dev/null +++ b/src-docs/src/views/steps/steps.js @@ -0,0 +1,59 @@ +import React from 'react'; + +import { + EuiCode, + EuiSpacer, + EuiSteps, + EuiText, +} from '../../../../src/components'; + +const firstSetOfSteps = [ + { + title: 'step 1', + children: (

{'Do this first'}

) + }, + { + title: 'step 2', + children: (

{'Then this'}

) + }, + { + title: 'step 3', + children: (

{'And finally, do this'}

) + }, +]; + +const nextSetOfSteps = [ + { + title: 'good step', + children: (

{'Do this first'}

) + }, + { + title: 'better step', + children: (

{'Then this'}

) + }, + { + title: 'best step', + children: (

{'And finally, do this'}

) + }, +]; + +export default () => ( +
+ + + + +

+ Set offset to continue step numbering after any type of break in the content +

+ + + + +
+); diff --git a/src-docs/src/views/steps/steps_example.js b/src-docs/src/views/steps/steps_example.js new file mode 100644 index 00000000000..b0f2d75648b --- /dev/null +++ b/src-docs/src/views/steps/steps_example.js @@ -0,0 +1,31 @@ +import React from 'react'; + +import { renderToHtml } from '../../services'; + +import { + GuideSectionTypes, +} from '../../components'; + +import Steps from './steps'; +const stepsSource = require('!!raw-loader!./steps'); +const stepsHtml = renderToHtml(Steps); + +export const StepsExample = { + title: 'Steps', + sections: [{ + title: 'Steps', + source: [{ + type: GuideSectionTypes.JS, + code: stepsSource, + }, { + type: GuideSectionTypes.HTML, + code: stepsHtml, + }], + text: ( +

+ Numbered steps +

+ ), + demo: , + }], +}; diff --git a/src/components/index.js b/src/components/index.js index cc0db64f9f1..3f512fe7c6c 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -174,6 +174,10 @@ export { EuiSpacer, } from './spacer'; +export { + EuiSteps, +} from './steps'; + export { EuiTable, EuiTableBody, diff --git a/src/components/index.scss b/src/components/index.scss index d794e289452..b538506c0ad 100644 --- a/src/components/index.scss +++ b/src/components/index.scss @@ -30,6 +30,7 @@ @import 'progress/index'; @import 'side_nav/index'; @import 'spacer/index'; +@import 'steps/index'; @import 'table/index'; @import 'tabs/index'; @import 'title/index'; diff --git a/src/components/steps/__snapshots__/steps.test.js.snap b/src/components/steps/__snapshots__/steps.test.js.snap new file mode 100644 index 00000000000..9eeb464e670 --- /dev/null +++ b/src/components/steps/__snapshots__/steps.test.js.snap @@ -0,0 +1,145 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EuiSteps renders steps 1`] = ` +
+
+
+
+ 1 +
+

+ first title +

+
+
+

+ Do this first +

+
+
+
+
+
+ 2 +
+

+ second title +

+
+
+

+ Then this +

+
+
+
+
+
+ 3 +
+

+ third title +

+
+
+

+ And finally, do this +

+
+
+
+`; + +exports[`EuiSteps renders steps with offset 1`] = ` +
+
+
+
+ 10 +
+

+ first title +

+
+
+

+ Do this first +

+
+
+
+
+
+ 11 +
+

+ second title +

+
+
+

+ Then this +

+
+
+
+
+
+ 12 +
+

+ third title +

+
+
+

+ And finally, do this +

+
+
+
+`; diff --git a/src/components/steps/_index.scss b/src/components/steps/_index.scss new file mode 100644 index 00000000000..c64a8f5a532 --- /dev/null +++ b/src/components/steps/_index.scss @@ -0,0 +1 @@ +@import 'steps'; diff --git a/src/components/steps/_steps.scss b/src/components/steps/_steps.scss new file mode 100644 index 00000000000..11c50fa60d5 --- /dev/null +++ b/src/components/steps/_steps.scss @@ -0,0 +1,27 @@ +.euiSteps { + +} + +.euiStepNumber { + width: 32px; + height: 32px; + display: inline-block; + line-height: 32px; + text-align: center; + color: #FFF; + border-radius: 100%; + background-color: #0079a5; +} + +.euiStepTitle { + display: inline-block; + margin-left: 16px; +} + +.euiStep { + border-left: medium solid #D9D9D9; + margin-top: 8px; + margin-bottom: 8px; + margin-left: 16px; + padding-left: 24px; +} diff --git a/src/components/steps/index.js b/src/components/steps/index.js new file mode 100644 index 00000000000..c197c4f0b27 --- /dev/null +++ b/src/components/steps/index.js @@ -0,0 +1,3 @@ +export { + EuiSteps, +} from './steps'; diff --git a/src/components/steps/step.js b/src/components/steps/step.js new file mode 100644 index 00000000000..3f7282439db --- /dev/null +++ b/src/components/steps/step.js @@ -0,0 +1,29 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +export function EuiStep({ children, step, title }) { + return ( +
+ +
+
+ {step} +
+

+ {title} +

+
+ +
+ {children} +
+ +
+ ); +} + +EuiStep.propTypes = { + children: PropTypes.node.isRequired, + step: PropTypes.number.isRequired, + title: PropTypes.string.isRequired, +}; diff --git a/src/components/steps/steps.js b/src/components/steps/steps.js new file mode 100644 index 00000000000..e7379acc945 --- /dev/null +++ b/src/components/steps/steps.js @@ -0,0 +1,46 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import { EuiStep } from './step'; + +function renderSteps(steps, offset = 0) { + return steps.map((step, index) => ( + + {step.children} + + )); +} + +export const EuiSteps = ({ + className, + offset, + steps, + ...rest, +}) => { + const classes = classNames('euiSteps', className); + + return ( +
+ {renderSteps(steps, offset)} +
+ ); +}; + +const stepPropType = PropTypes.shape({ + title: PropTypes.string.isRequired, + children: PropTypes.node +}); + +EuiSteps.propTypes = { + className: PropTypes.string, + offset: PropTypes.number, + steps: PropTypes.arrayOf(stepPropType).isRequired, +}; diff --git a/src/components/steps/steps.test.js b/src/components/steps/steps.test.js new file mode 100644 index 00000000000..b57a02ea0bd --- /dev/null +++ b/src/components/steps/steps.test.js @@ -0,0 +1,40 @@ +import React from 'react'; +import { render } from 'enzyme'; +import { requiredProps } from '../../test/required_props'; + +import { EuiSteps } from './steps'; + +const steps = [ + { + title: 'first title', + children: (

{'Do this first'}

) + }, + { + title: 'second title', + children: (

{'Then this'}

) + }, + { + title: 'third title', + children: (

{'And finally, do this'}

) + }, +]; + +describe('EuiSteps', () => { + test('renders steps', () => { + const component = render( + + ); + + expect(component) + .toMatchSnapshot(); + }); + + test('renders steps with offset', () => { + const component = render( + + ); + + expect(component) + .toMatchSnapshot(); + }); +}); From 1d7124e50cfcbaaf0f5718bdce5cd956c5173bc9 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Wed, 13 Dec 2017 14:08:07 -0700 Subject: [PATCH 2/6] rename offset to firstStepNumber, add EuiStep jest test, pass className and rest to EuiStep --- CHANGELOG.md | 3 ++ src-docs/src/views/steps/steps.js | 4 +- .../steps/__snapshots__/step.test.js.snap | 29 +++++++++++++ .../steps/__snapshots__/steps.test.js.snap | 38 ++++++++--------- src/components/steps/step.js | 25 ++++++++--- src/components/steps/step.test.js | 22 ++++++++++ src/components/steps/steps.js | 42 ++++++++++++------- src/components/steps/steps.test.js | 4 +- 8 files changed, 124 insertions(+), 43 deletions(-) create mode 100644 src/components/steps/__snapshots__/step.test.js.snap create mode 100644 src/components/steps/step.test.js diff --git a/CHANGELOG.md b/CHANGELOG.md index f47bf8b1bfe..1e903271216 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,6 @@ # [`master`](https://github.com/elastic/eui/tree/master) +- Added `EuiSteps` component - Added `EuiHealth` components for status checks [(#158)](https://github.com/elastic/eui/pull/158) - Cleaned up styling for checkboxes, switches, and radios [(#158)](https://github.com/elastic/eui/pull/158) - Form `disabled` states are now more consistant [(#158)](https://github.com/elastic/eui/pull/158) @@ -51,3 +52,5 @@ # [`0.0.1`](https://github.com/elastic/eui/tree/v0.0.1) Initial Release - Initial public release + + diff --git a/src-docs/src/views/steps/steps.js b/src-docs/src/views/steps/steps.js index 7c9ac21b457..c5cf693e417 100644 --- a/src-docs/src/views/steps/steps.js +++ b/src-docs/src/views/steps/steps.js @@ -46,13 +46,13 @@ export default () => (

- Set offset to continue step numbering after any type of break in the content + Set firstStepNumber to continue step numbering after any type of break in the content

diff --git a/src/components/steps/__snapshots__/step.test.js.snap b/src/components/steps/__snapshots__/step.test.js.snap new file mode 100644 index 00000000000..ba7b349559e --- /dev/null +++ b/src/components/steps/__snapshots__/step.test.js.snap @@ -0,0 +1,29 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EuiStep is rendered 1`] = ` +
+
+
+ 1 +
+

+ First step +

+
+
+

+ Do this +

+
+
+`; diff --git a/src/components/steps/__snapshots__/steps.test.js.snap b/src/components/steps/__snapshots__/steps.test.js.snap index 9eeb464e670..ecf0ec39ec8 100644 --- a/src/components/steps/__snapshots__/steps.test.js.snap +++ b/src/components/steps/__snapshots__/steps.test.js.snap @@ -13,11 +13,11 @@ exports[`EuiSteps renders steps 1`] = ` > 1 -

first title -

+

2
-

second title -

+

3
-

third title -

+

`; -exports[`EuiSteps renders steps with offset 1`] = ` +exports[`EuiSteps renders steps with firstStepNumber 1`] = `
10
-

first title -

+

11
-

second title -

+

12
-

third title -

+

{ return ( -
+
{step}
-

- {title} -

+ +

{title}

+
@@ -20,7 +33,7 @@ export function EuiStep({ children, step, title }) {
); -} +}; EuiStep.propTypes = { children: PropTypes.node.isRequired, diff --git a/src/components/steps/step.test.js b/src/components/steps/step.test.js new file mode 100644 index 00000000000..090962348e1 --- /dev/null +++ b/src/components/steps/step.test.js @@ -0,0 +1,22 @@ +import React from 'react'; +import { render } from 'enzyme'; +import { requiredProps } from '../../test/required_props'; + +import { EuiStep } from './step'; + +describe('EuiStep', () => { + test('is rendered', () => { + const stepContent = (

Do this

); + const component = render( + + ); + + expect(component) + .toMatchSnapshot(); + }); +}); diff --git a/src/components/steps/steps.js b/src/components/steps/steps.js index e7379acc945..f6265ee3f5b 100644 --- a/src/components/steps/steps.js +++ b/src/components/steps/steps.js @@ -3,22 +3,32 @@ import PropTypes from 'prop-types'; import classNames from 'classnames'; import { EuiStep } from './step'; -function renderSteps(steps, offset = 0) { - return steps.map((step, index) => ( - - {step.children} - - )); +function renderSteps(steps, firstStepNumber) { + return steps.map((step, index) => { + const { + className, + children, + title, + ...rest + } = step; + + return ( + + {children} + + ); + }); } export const EuiSteps = ({ className, - offset, + firstStepNumber, steps, ...rest, }) => { @@ -29,7 +39,7 @@ export const EuiSteps = ({ className={classes} {...rest} > - {renderSteps(steps, offset)} + {renderSteps(steps, firstStepNumber)}
); }; @@ -41,6 +51,10 @@ const stepPropType = PropTypes.shape({ EuiSteps.propTypes = { className: PropTypes.string, - offset: PropTypes.number, + firstStepNumber: PropTypes.number, steps: PropTypes.arrayOf(stepPropType).isRequired, }; + +EuiSteps.defaultProps = { + firstStepNumber: 0 +}; diff --git a/src/components/steps/steps.test.js b/src/components/steps/steps.test.js index b57a02ea0bd..7745513d170 100644 --- a/src/components/steps/steps.test.js +++ b/src/components/steps/steps.test.js @@ -29,9 +29,9 @@ describe('EuiSteps', () => { .toMatchSnapshot(); }); - test('renders steps with offset', () => { + test('renders steps with firstStepNumber', () => { const component = render( - + ); expect(component) From c150655ff8c8336598a0c56fb13da7814278a621 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Wed, 13 Dec 2017 15:24:04 -0700 Subject: [PATCH 3/6] rename euiStep to euiStepContent, put euiStep class on root element --- .../steps/__snapshots__/step.test.js.snap | 4 +-- .../steps/__snapshots__/steps.test.js.snap | 36 ++++++++++++------- src/components/steps/_steps.scss | 2 +- src/components/steps/step.js | 6 ++-- 4 files changed, 31 insertions(+), 17 deletions(-) diff --git a/src/components/steps/__snapshots__/step.test.js.snap b/src/components/steps/__snapshots__/step.test.js.snap index ba7b349559e..25b7993c4bb 100644 --- a/src/components/steps/__snapshots__/step.test.js.snap +++ b/src/components/steps/__snapshots__/step.test.js.snap @@ -3,7 +3,7 @@ exports[`EuiStep is rendered 1`] = `
@@ -19,7 +19,7 @@ exports[`EuiStep is rendered 1`] = `

Do this diff --git a/src/components/steps/__snapshots__/steps.test.js.snap b/src/components/steps/__snapshots__/steps.test.js.snap index ecf0ec39ec8..92b470f7fff 100644 --- a/src/components/steps/__snapshots__/steps.test.js.snap +++ b/src/components/steps/__snapshots__/steps.test.js.snap @@ -6,7 +6,9 @@ exports[`EuiSteps renders steps 1`] = ` class="euiSteps testClass1 testClass2" data-test-subj="test subject string" > -

+

Do this first

-
+

Then this

-
+

And finally, do this @@ -78,7 +84,9 @@ exports[`EuiSteps renders steps with firstStepNumber 1`] = ` class="euiSteps testClass1 testClass2" data-test-subj="test subject string" > -

+

Do this first

-
+

Then this

-
+

And finally, do this diff --git a/src/components/steps/_steps.scss b/src/components/steps/_steps.scss index 11c50fa60d5..51c571ab08a 100644 --- a/src/components/steps/_steps.scss +++ b/src/components/steps/_steps.scss @@ -18,7 +18,7 @@ margin-left: 16px; } -.euiStep { +.euiStepContent { border-left: medium solid #D9D9D9; margin-top: 8px; margin-bottom: 8px; diff --git a/src/components/steps/step.js b/src/components/steps/step.js index 9bd82bd4d31..9ad93fe2986 100644 --- a/src/components/steps/step.js +++ b/src/components/steps/step.js @@ -1,5 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; +import classNames from 'classnames'; import { EuiTitle @@ -12,9 +13,10 @@ export const EuiStep = ({ title, ...rest }) => { + const classes = classNames('euiStep', className); return (

@@ -27,7 +29,7 @@ export const EuiStep = ({
-
+
{children}
From 38fba878d21f69c3bfcac0e01af6b525e45ae2ec Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Wed, 13 Dec 2017 19:23:57 -0700 Subject: [PATCH 4/6] add headingElement prop --- .../steps/__snapshots__/step.test.js.snap | 4 +- .../steps/__snapshots__/steps.test.js.snap | 78 +++++++++++++++++++ src/components/steps/step.js | 4 +- src/components/steps/step.test.js | 1 + src/components/steps/steps.js | 10 ++- src/components/steps/steps.test.js | 9 +++ 6 files changed, 100 insertions(+), 6 deletions(-) diff --git a/src/components/steps/__snapshots__/step.test.js.snap b/src/components/steps/__snapshots__/step.test.js.snap index 25b7993c4bb..71be26248e2 100644 --- a/src/components/steps/__snapshots__/step.test.js.snap +++ b/src/components/steps/__snapshots__/step.test.js.snap @@ -12,11 +12,11 @@ exports[`EuiStep is rendered 1`] = ` > 1
-

First step -

+
+
+
+
+ 1 +
+

+ first title +

+
+
+

+ Do this first +

+
+
+
+
+
+ 2 +
+

+ second title +

+
+
+

+ Then this +

+
+
+
+
+
+ 3 +
+

+ third title +

+
+
+

+ And finally, do this +

+
+
+
+`; + exports[`EuiSteps renders steps 1`] = `
-

{title}

+ {React.createElement(headingElement, null, title)}
@@ -41,4 +42,5 @@ EuiStep.propTypes = { children: PropTypes.node.isRequired, step: PropTypes.number.isRequired, title: PropTypes.string.isRequired, + headingElement: PropTypes.string.isRequired, }; diff --git a/src/components/steps/step.test.js b/src/components/steps/step.test.js index 090962348e1..3393d03e6eb 100644 --- a/src/components/steps/step.test.js +++ b/src/components/steps/step.test.js @@ -10,6 +10,7 @@ describe('EuiStep', () => { const component = render( { const { className, @@ -16,6 +16,7 @@ function renderSteps(steps, firstStepNumber) { { @@ -39,7 +41,7 @@ export const EuiSteps = ({ className={classes} {...rest} > - {renderSteps(steps, firstStepNumber)} + {renderSteps(steps, firstStepNumber, headingElement)}
); }; @@ -52,9 +54,11 @@ const stepPropType = PropTypes.shape({ EuiSteps.propTypes = { className: PropTypes.string, firstStepNumber: PropTypes.number, + headingElement: PropTypes.string, steps: PropTypes.arrayOf(stepPropType).isRequired, }; EuiSteps.defaultProps = { - firstStepNumber: 0 + firstStepNumber: 0, + headingElement: 'p' }; diff --git a/src/components/steps/steps.test.js b/src/components/steps/steps.test.js index 7745513d170..85727fbc5e3 100644 --- a/src/components/steps/steps.test.js +++ b/src/components/steps/steps.test.js @@ -37,4 +37,13 @@ describe('EuiSteps', () => { expect(component) .toMatchSnapshot(); }); + + test('renders step title inside "headingElement" element', () => { + const component = render( + + ); + + expect(component) + .toMatchSnapshot(); + }); }); From cf81499e1beedc825c3237910d3437a5aae7d310 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Wed, 13 Dec 2017 19:34:55 -0700 Subject: [PATCH 5/6] add heading element example to src-docs --- .../src/views/steps/heading_element_steps.js | 22 +++++++++++++++++++ src-docs/src/views/steps/steps_example.js | 20 +++++++++++++++++ 2 files changed, 42 insertions(+) create mode 100644 src-docs/src/views/steps/heading_element_steps.js diff --git a/src-docs/src/views/steps/heading_element_steps.js b/src-docs/src/views/steps/heading_element_steps.js new file mode 100644 index 00000000000..4b8927c9282 --- /dev/null +++ b/src-docs/src/views/steps/heading_element_steps.js @@ -0,0 +1,22 @@ +import React from 'react'; + +import { + EuiSteps, +} from '../../../../src/components'; + +const steps = [ + { + title: 'inspect me', + children: (

{'Did you notice the step title is inside a Heading 2 element?'}

) + } +]; + +export default () => ( +
+

Heading 1

+ +
+); diff --git a/src-docs/src/views/steps/steps_example.js b/src-docs/src/views/steps/steps_example.js index b0f2d75648b..9a89578965b 100644 --- a/src-docs/src/views/steps/steps_example.js +++ b/src-docs/src/views/steps/steps_example.js @@ -10,6 +10,10 @@ import Steps from './steps'; const stepsSource = require('!!raw-loader!./steps'); const stepsHtml = renderToHtml(Steps); +import HeadingElementSteps from './heading_element_steps'; +const headingElementStepsSource = require('!!raw-loader!./heading_element_steps'); +const headingElementStepsHtml = renderToHtml(HeadingElementSteps); + export const StepsExample = { title: 'Steps', sections: [{ @@ -27,5 +31,21 @@ export const StepsExample = {

), demo: , + }, + { + title: 'Heading Element Steps', + source: [{ + type: GuideSectionTypes.JS, + code: headingElementStepsSource, + }, { + type: GuideSectionTypes.HTML, + code: headingElementStepsHtml, + }], + text: ( +

+ something something better accessibility +

+ ), + demo: , }], }; From be7c3cd7d86cd19ebe973f93c33a98d6e9956509 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Thu, 14 Dec 2017 11:47:32 -0700 Subject: [PATCH 6/6] more cleanup --- src-docs/src/views/steps/heading_element_steps.js | 4 ++-- src-docs/src/views/steps/steps.js | 14 +++++++------- src/components/steps/steps.js | 4 ++-- src/components/steps/steps.test.js | 10 +++++----- 4 files changed, 16 insertions(+), 16 deletions(-) diff --git a/src-docs/src/views/steps/heading_element_steps.js b/src-docs/src/views/steps/heading_element_steps.js index 4b8927c9282..062678814ed 100644 --- a/src-docs/src/views/steps/heading_element_steps.js +++ b/src-docs/src/views/steps/heading_element_steps.js @@ -7,7 +7,7 @@ import { const steps = [ { title: 'inspect me', - children: (

{'Did you notice the step title is inside a Heading 2 element?'}

) + children:

Did you notice the step title is inside a Heading 2 element?

} ]; @@ -16,7 +16,7 @@ export default () => (

Heading 1

); diff --git a/src-docs/src/views/steps/steps.js b/src-docs/src/views/steps/steps.js index c5cf693e417..167d7cefb66 100644 --- a/src-docs/src/views/steps/steps.js +++ b/src-docs/src/views/steps/steps.js @@ -10,30 +10,30 @@ import { const firstSetOfSteps = [ { title: 'step 1', - children: (

{'Do this first'}

) + children:

Do this first

}, { title: 'step 2', - children: (

{'Then this'}

) + children:

Then this

}, { title: 'step 3', - children: (

{'And finally, do this'}

) + children:

And finally, do this

}, ]; const nextSetOfSteps = [ { title: 'good step', - children: (

{'Do this first'}

) + children:

Do this first

}, { title: 'better step', - children: (

{'Then this'}

) + children:

Then this

}, { title: 'best step', - children: (

{'And finally, do this'}

) + children:

And finally, do this

}, ]; @@ -52,7 +52,7 @@ export default () => (
diff --git a/src/components/steps/steps.js b/src/components/steps/steps.js index 43b93ef2f23..e888f90c202 100644 --- a/src/components/steps/steps.js +++ b/src/components/steps/steps.js @@ -17,7 +17,7 @@ function renderSteps(steps, firstStepNumber, headingElement) { className={className} key={index} headingElement={headingElement} - step={firstStepNumber + index + 1} + step={firstStepNumber + index} title={title} {...rest} > @@ -59,6 +59,6 @@ EuiSteps.propTypes = { }; EuiSteps.defaultProps = { - firstStepNumber: 0, + firstStepNumber: 1, headingElement: 'p' }; diff --git a/src/components/steps/steps.test.js b/src/components/steps/steps.test.js index 85727fbc5e3..4afb3ee40f4 100644 --- a/src/components/steps/steps.test.js +++ b/src/components/steps/steps.test.js @@ -7,15 +7,15 @@ import { EuiSteps } from './steps'; const steps = [ { title: 'first title', - children: (

{'Do this first'}

) + children:

Do this first

}, { title: 'second title', - children: (

{'Then this'}

) + children:

Then this

}, { title: 'third title', - children: (

{'And finally, do this'}

) + children:

And finally, do this

}, ]; @@ -31,7 +31,7 @@ describe('EuiSteps', () => { test('renders steps with firstStepNumber', () => { const component = render( - + ); expect(component) @@ -40,7 +40,7 @@ describe('EuiSteps', () => { test('renders step title inside "headingElement" element', () => { const component = render( - + ); expect(component)