From 3f36a3263d341c37d00209be963545b087f3431f Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Mon, 11 Dec 2017 14:01:50 -0700 Subject: [PATCH 01/13] 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 02/13] 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 03/13] 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 04/13] 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 05/13] 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 e81ed86a07fa7726ac0226ee6858bcefff22e661 Mon Sep 17 00:00:00 2001 From: chorn Date: Thu, 14 Dec 2017 11:39:25 -0500 Subject: [PATCH 06/13] Styled steps --- .../steps/__snapshots__/step.test.js.snap | 13 +- .../steps/__snapshots__/steps.test.js.snap | 117 ++++++++++-------- src/components/steps/_steps.scss | 63 ++++++---- src/components/steps/step.js | 13 +- 4 files changed, 117 insertions(+), 89 deletions(-) diff --git a/src/components/steps/__snapshots__/step.test.js.snap b/src/components/steps/__snapshots__/step.test.js.snap index 71be26248e2..d246f557bdb 100644 --- a/src/components/steps/__snapshots__/step.test.js.snap +++ b/src/components/steps/__snapshots__/step.test.js.snap @@ -7,19 +7,20 @@ exports[`EuiStep is rendered 1`] = ` data-test-subj="test subject string" >
-
- 1 -
+ Step 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 326cd6ed371..fe1a9335f65 100644 --- a/src/components/steps/__snapshots__/steps.test.js.snap +++ b/src/components/steps/__snapshots__/steps.test.js.snap @@ -10,19 +10,20 @@ exports[`EuiSteps renders step title inside "headingElement" element 1`] = ` class="euiStep" >

-
- 1 -
+ Step 1 +

first title

Do this first @@ -33,19 +34,20 @@ exports[`EuiSteps renders step title inside "headingElement" element 1`] = ` class="euiStep" >

-
- 2 -
+ Step 2 +

second title

Then this @@ -56,19 +58,20 @@ exports[`EuiSteps renders step title inside "headingElement" element 1`] = ` class="euiStep" >

-
- 3 -
+ Step 3 +

third title

And finally, do this @@ -88,19 +91,20 @@ exports[`EuiSteps renders steps 1`] = ` class="euiStep" >

-
- 1 -
+ Step 1 +

first title

Do this first @@ -111,19 +115,20 @@ exports[`EuiSteps renders steps 1`] = ` class="euiStep" >

-
- 2 -
+ Step 2 +

second title

Then this @@ -134,19 +139,20 @@ exports[`EuiSteps renders steps 1`] = ` class="euiStep" >

-
- 3 -
+ Step 3 +

third title

And finally, do this @@ -166,19 +172,20 @@ exports[`EuiSteps renders steps with firstStepNumber 1`] = ` class="euiStep" >

-
- 10 -
+ Step 10 +

first title

Do this first @@ -189,19 +196,20 @@ exports[`EuiSteps renders steps with firstStepNumber 1`] = ` class="euiStep" >

-
- 11 -
+ Step 11 +

second title

Then this @@ -212,19 +220,20 @@ exports[`EuiSteps renders steps with firstStepNumber 1`] = ` class="euiStep" >

-
- 12 -
+ Step 12 +

third title

And finally, do this diff --git a/src/components/steps/_steps.scss b/src/components/steps/_steps.scss index 51c571ab08a..6343ced9386 100644 --- a/src/components/steps/_steps.scss +++ b/src/components/steps/_steps.scss @@ -1,27 +1,46 @@ -.euiSteps { +$euiStepNumberSize: $euiSizeXL !default; +$euiStepNumberMargin: $euiSize !default; -} +/** + * 1. Ensure that the step number vertically aligns with the title text + */ -.euiStepNumber { - width: 32px; - height: 32px; - display: inline-block; - line-height: 32px; - text-align: center; - color: #FFF; - border-radius: 100%; - background-color: #0079a5; -} +.euiStep { + // Do not show the content border if it is the last step + &:last-of-type .euiStep__content { + border-left-color: transparent; + } -.euiStepTitle { - display: inline-block; - margin-left: 16px; + .euiTitle { + line-height: $euiStepNumberSize; /* 1 */ + } } -.euiStepContent { - border-left: medium solid #D9D9D9; - margin-top: 8px; - margin-bottom: 8px; - margin-left: 16px; - padding-left: 24px; -} + .euiStep__title::before { + content: attr(data-step-num); // Get the number from the data attribute + display: inline-block; + @include size($euiStepNumberSize); + line-height: $euiStepNumberSize; + border-radius: $euiStepNumberSize; + margin-right: $euiStepNumberMargin; + text-align: center; + + color: $euiColorEmptyShade; + background-color: $euiColorPrimary; + + font-size: $euiFontSize; + font-weight: $euiFontWeightMedium; + vertical-align: top; /* 1 */ + } + + .euiStep__content { + border-left: $euiBorderThick; + padding: $euiSize; + margin: $euiSizeS 0; + + // Align the content's contents with the title + padding-left: ($euiStepNumberSize/2) - 1px + $euiStepNumberMargin; + + // Align content border to horizontal center of step number + margin-left: ($euiStepNumberSize/2) - 1px; + } \ No newline at end of file diff --git a/src/components/steps/step.js b/src/components/steps/step.js index b59d78e526f..4eb8f93fcff 100644 --- a/src/components/steps/step.js +++ b/src/components/steps/step.js @@ -3,8 +3,9 @@ import PropTypes from 'prop-types'; import classNames from 'classnames'; import { - EuiTitle -} from '../title'; + EuiScreenReaderOnly, + EuiTitle, +} from '../'; export const EuiStep = ({ className, @@ -22,15 +23,13 @@ export const EuiStep = ({ >

-
- {step} -
- + Step {step} + {React.createElement(headingElement, null, title)}
-
+
{children}
From 0e7778e2866674896c6d8660dadadc7c271bf449 Mon Sep 17 00:00:00 2001 From: chorn Date: Thu, 14 Dec 2017 12:20:24 -0500 Subject: [PATCH 07/13] Updating the docs --- .../src/views/steps/heading_element_steps.js | 10 +++++++--- src-docs/src/views/steps/steps.js | 12 +++++------ src-docs/src/views/steps/steps_example.js | 20 +++++++++++++++---- 3 files changed, 29 insertions(+), 13 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..8bd89a9b013 100644 --- a/src-docs/src/views/steps/heading_element_steps.js +++ b/src-docs/src/views/steps/heading_element_steps.js @@ -1,19 +1,23 @@ import React from 'react'; import { + EuiText, EuiSteps, } from '../../../../src/components'; const steps = [ { - title: 'inspect me', - children: (

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

) + title: 'Inspect me', + children: (

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

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

Heading 1

+

Heading 1

 + +

+ {'Do this first'}

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

{'Then this'}

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

{'And finally, do this'}

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

{'Do this first'}

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

{'Then this'}

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

{'And finally, do this'}

) }, ]; diff --git a/src-docs/src/views/steps/steps_example.js b/src-docs/src/views/steps/steps_example.js index 9a89578965b..8fbd6679c71 100644 --- a/src-docs/src/views/steps/steps_example.js +++ b/src-docs/src/views/steps/steps_example.js @@ -6,6 +6,10 @@ import { GuideSectionTypes, } from '../../components'; +import { + EuiCode, +} from '../../../../src/components'; + import Steps from './steps'; const stepsSource = require('!!raw-loader!./steps'); const stepsHtml = renderToHtml(Steps); @@ -33,7 +37,7 @@ export const StepsExample = { demo: , }, { - title: 'Heading Element Steps', + title: 'Heading Elements', source: [{ type: GuideSectionTypes.JS, code: headingElementStepsSource, @@ -42,9 +46,17 @@ export const StepsExample = { code: headingElementStepsHtml, }], text: ( -

- something something better accessibility -

+
+

+ To aide with accessibility and hierachical headings, + you can and should pass in a heading element to use for each step title. + The example below shows that the logical heading element should be an h2 + and therefore adds headingElement="h2" to the EuiSteps component. +

+

+ The style of the title will not be affected. +

+
), demo: , }], From be7c3cd7d86cd19ebe973f93c33a98d6e9956509 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Thu, 14 Dec 2017 11:47:32 -0700 Subject: [PATCH 08/13] 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) From d0f8bb77d4823234353ecd88974b6d032c3bad33 Mon Sep 17 00:00:00 2001 From: chorn Date: Thu, 14 Dec 2017 17:44:25 -0500 Subject: [PATCH 09/13] Spelling and component usage fixes --- src-docs/src/views/steps/heading_element_steps.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src-docs/src/views/steps/heading_element_steps.js b/src-docs/src/views/steps/heading_element_steps.js index 9f2771b34b9..862e1cb3ee2 100644 --- a/src-docs/src/views/steps/heading_element_steps.js +++ b/src-docs/src/views/steps/heading_element_steps.js @@ -2,21 +2,22 @@ import React from 'react'; import { EuiSteps, - EuiText + EuiTitle, + EuiSpacer } from '../../../../src/components'; 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?

 } ]; export default () => (
-

Heading 1

 +

Heading 1

 -

+ Date: Thu, 14 Dec 2017 17:52:44 -0500 Subject: [PATCH 10/13] Removed step num from screen reader only elem --- .../steps/__snapshots__/step.test.js.snap | 24 +- .../steps/__snapshots__/steps.test.js.snap | 216 ++++++++---------- src/components/steps/step.js | 11 +- 3 files changed, 115 insertions(+), 136 deletions(-) diff --git a/src/components/steps/__snapshots__/step.test.js.snap b/src/components/steps/__snapshots__/step.test.js.snap index d246f557bdb..0e8bbc7730a 100644 --- a/src/components/steps/__snapshots__/step.test.js.snap +++ b/src/components/steps/__snapshots__/step.test.js.snap @@ -6,19 +6,17 @@ exports[`EuiStep is rendered 1`] = ` class="euiStep testClass1 testClass2" data-test-subj="test subject string" > -
- - Step 1 - -

- First step -

-
+ + Step + +

+ First step +

diff --git a/src/components/steps/__snapshots__/steps.test.js.snap b/src/components/steps/__snapshots__/steps.test.js.snap index fe1a9335f65..7f205109681 100644 --- a/src/components/steps/__snapshots__/steps.test.js.snap +++ b/src/components/steps/__snapshots__/steps.test.js.snap @@ -9,19 +9,17 @@ exports[`EuiSteps renders step title inside "headingElement" element 1`] = `
-
- - Step 1 - -

- first title -

-
+ + Step + +

+ first title +

@@ -33,19 +31,17 @@ exports[`EuiSteps renders step title inside "headingElement" element 1`] = `
-
- - Step 2 - -

- second title -

-
+ + Step + +

+ second title +

@@ -57,19 +53,17 @@ exports[`EuiSteps renders step title inside "headingElement" element 1`] = `
-
- - Step 3 - -

- third title -

-
+ + Step + +

+ third title +

@@ -90,19 +84,17 @@ exports[`EuiSteps renders steps 1`] = `
-
- - Step 1 - -

- first title -

-
+ + Step + +

+ first title +

@@ -114,19 +106,17 @@ exports[`EuiSteps renders steps 1`] = `
-
- - Step 2 - -

- second title -

-
+ + Step + +

+ second title +

@@ -138,19 +128,17 @@ exports[`EuiSteps renders steps 1`] = `
-
- - Step 3 - -

- third title -

-
+ + Step + +

+ third title +

@@ -171,19 +159,17 @@ exports[`EuiSteps renders steps with firstStepNumber 1`] = `
-
- - Step 10 - -

- first title -

-
+ + Step + +

+ first title +

@@ -195,19 +181,17 @@ exports[`EuiSteps renders steps with firstStepNumber 1`] = `
-
- - Step 11 - -

- second title -

-
+ + Step + +

+ second title +

@@ -219,19 +203,17 @@ exports[`EuiSteps renders steps with firstStepNumber 1`] = `
-
- - Step 12 - -

- third title -

-
+ + Step + +

+ third title +

diff --git a/src/components/steps/step.js b/src/components/steps/step.js index 4eb8f93fcff..92592097edd 100644 --- a/src/components/steps/step.js +++ b/src/components/steps/step.js @@ -22,12 +22,11 @@ export const EuiStep = ({ {...rest} > -
- Step {step} - - {React.createElement(headingElement, null, title)} - -
+ Step + + + {React.createElement(headingElement, null, title)} +
{children} From 3cea2bc81136e3f55bccbd0210dba13389e61739 Mon Sep 17 00:00:00 2001 From: chorn Date: Thu, 14 Dec 2017 19:02:04 -0500 Subject: [PATCH 11/13] Adding default headingElement to step.js --- src/components/steps/step.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/steps/step.js b/src/components/steps/step.js index 92592097edd..ace0963bd07 100644 --- a/src/components/steps/step.js +++ b/src/components/steps/step.js @@ -42,3 +42,7 @@ EuiStep.propTypes = { title: PropTypes.string.isRequired, headingElement: PropTypes.string.isRequired, }; + +EuiStep.defaultProps = { + headingElement: 'p' +}; \ No newline at end of file From 906a6bd5c50b02acd222d32adffbab3dd68f187b Mon Sep 17 00:00:00 2001 From: chorn Date: Thu, 14 Dec 2017 19:03:08 -0500 Subject: [PATCH 12/13] Updated changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 00421749de1..2c357210595 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ # [`master`](https://github.com/elastic/eui/tree/master) -- Added `EuiSteps` component +- Added `EuiSteps` component ([(#202)](https://github.com/elastic/eui/pull/202), [(#208)](https://github.com/elastic/eui/pull/208)) - 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) From b4469847bd7ee827751fa6cae38ea55a8b82551d Mon Sep 17 00:00:00 2001 From: chorn Date: Fri, 15 Dec 2017 13:13:49 -0500 Subject: [PATCH 13/13] Spelling errors --- src-docs/src/views/steps/steps_example.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src-docs/src/views/steps/steps_example.js b/src-docs/src/views/steps/steps_example.js index 8fbd6679c71..f9978076c74 100644 --- a/src-docs/src/views/steps/steps_example.js +++ b/src-docs/src/views/steps/steps_example.js @@ -37,7 +37,7 @@ export const StepsExample = { demo: , }, { - title: 'Heading Elements', + title: 'Heading elements', source: [{ type: GuideSectionTypes.JS, code: headingElementStepsSource, @@ -48,7 +48,7 @@ export const StepsExample = { text: (

- To aide with accessibility and hierachical headings, + To aid with accessibility and hierarchical headings, you can and should pass in a heading element to use for each step title. The example below shows that the logical heading element should be an h2 and therefore adds headingElement="h2" to the EuiSteps component.