add Steps component #202
add Steps component #202
Conversation
src/components/steps/step.js
Outdated
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| export function EuiStep({ children, step, title }) { |
There was a problem hiding this comment.
Can we add className and ...rest to this destructuring assignment?
There was a problem hiding this comment.
Can we add a snapshot test for this component too?
src/components/steps/step.js
Outdated
|
|
||
| export function EuiStep({ children, step, title }) { | ||
| return ( | ||
| <div> |
There was a problem hiding this comment.
And can we assign them as props to this div?
There was a problem hiding this comment.
As well as add a standard component class of euiStep?
src/components/steps/steps.js
Outdated
| function renderSteps(steps, offset = 0) { | ||
| return steps.map((step, index) => ( | ||
| <EuiStep | ||
| className="kuiVerticalRhythm" |
There was a problem hiding this comment.
kui? What is this kui you speak of? :)
Can we also change this logic to allow the consumer to specify className and other arbitrary props on the step object?
function renderSteps(steps, firstStepNumber) {
return steps.map((step, index) => {
const {
className,
children,
title,
...rest
} = step;
return (
<EuiStep
className={className}
key={index}
step={firstStepNumber + index}
title={title}
{...rest}
>
{children}
</EuiStep>
);
));
}
src/components/steps/steps.js
Outdated
|
|
||
| EuiSteps.propTypes = { | ||
| className: PropTypes.string, | ||
| offset: PropTypes.number, |
There was a problem hiding this comment.
I had to read the docs to understand the role of this prop, but I think a clearer name would help. Maybe something like firstStepNumber?
There was a problem hiding this comment.
And can we set defaultProps so this defaults to 1, and remove the default on line 6?
src/components/steps/step.js
Outdated
| <div className="euiStepNumber"> | ||
| {step} | ||
| </div> | ||
| <h3 className="euiStepTitle"> |
There was a problem hiding this comment.
I don't think we can hardcode the h3 here. For accessibility purposes, headings should always be sequential, so if there is an <h3> on the page then there must also be at least one <h2> and only one <h1>.
I think our best option would be to allow the consumer to specify which element gets used for the heading, and to default to <p> if none is specified. This could be specified as a headingElement prop on KuiSteps, since I think we'd want to use the same heading element for each KuiStep within a KuiSteps instance.
We'd probably also want to put the step number inside of the heading element too, if possible, so that screen readers will read the number and heading text together.
There was a problem hiding this comment.
Also, can we reuse the EuiTitle component here?
<EuiTitle>
<headingElement>{title}</headingElement>
</EuiTitle>
|
We should also add a note about this new component to the CHANGELOG.md. |
…me and rest to EuiStep
src/components/steps/step.js
Outdated
| </EuiTitle> | ||
| </div> | ||
|
|
||
| <div className="euiStep"> |
There was a problem hiding this comment.
@nreese Can you actually put the .euiStep className on the entire wrapping div and rename this one to be euiStepContent? This way I can know which EuiStep is the last one in the EuiSteps container.
src/components/steps/step.js
Outdated
| {step} | ||
| </div> | ||
| <EuiTitle className="euiStepTitle"> | ||
| <p>{title}</p> |
There was a problem hiding this comment.
@nreese Is it possible to propagate what the html tag inside the EuiTitle should be? Meaning, can we add a prop to EuiSteps that is something like titleTag which should be an html tag like 'h2' or 'h3' and defaults to 'p'?
This will help with the DOM flow of headers for accessibility since only when we instantiate the component will we know where in the hierarchy it will lie. I think @cjcenizal mentioned something like this during his review.
|
👍 LGTM to start styling. |
| const steps = [ | ||
| { | ||
| title: 'inspect me', | ||
| children: (<h3>{'Did you notice the step title is inside a Heading 2 element?'}</h3>) |
There was a problem hiding this comment.
Minor nit but I don't think the parens are necessary here.
| <h1>Heading 1</h1> | ||
| <EuiSteps | ||
| steps={steps} | ||
| headingElement={'h2'} |
There was a problem hiding this comment.
This can just be "h2" (no braces necessary).
src-docs/src/views/steps/steps.js
Outdated
| const firstSetOfSteps = [ | ||
| { | ||
| title: 'step 1', | ||
| children: (<p>{'Do this first'}</p>) |
There was a problem hiding this comment.
Same nit about parens here and elsewhere in the file.
src/components/steps/steps.js
Outdated
| }; | ||
|
|
||
| EuiSteps.defaultProps = { | ||
| firstStepNumber: 0, |
There was a problem hiding this comment.
Can we set this default to 1? Then you won't need to add 1 on line 20.
src/components/steps/steps.test.js
Outdated
| }, | ||
| { | ||
| title: 'third title', | ||
| children: (<p>{'And finally, do this'}</p>) |
Needs some CSS work to use variable instead of hard coded colors and sizes but otherwise is complete