Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Steps are styled #208

Merged
merged 15 commits into from
Dec 15, 2017
+205 −177
Merged

Steps are styled #208

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
3f36a32
add Steps component
nreese Dec 11, 2017
1d7124e
rename offset to firstStepNumber, add EuiStep jest test, pass classNa…
nreese Dec 13, 2017
c150655
rename euiStep to euiStepContent, put euiStep class on root element
nreese Dec 13, 2017
38fba87
add headingElement prop
nreese Dec 14, 2017
cf81499
add heading element example to src-docs
nreese Dec 14, 2017
e81ed86
Styled steps
cchaos Dec 14, 2017
0e7778e
Updating the docs
cchaos Dec 14, 2017
be7c3cd
more cleanup
nreese Dec 14, 2017
8af96ce
Merge remote-tracking branch 'nreese/steps' into steps-style
cchaos Dec 14, 2017
6b95cf2
Merge remote-tracking branch 'origin/steps_component' into steps-style
cchaos Dec 14, 2017
d0f8bb7
Spelling and component usage fixes
cchaos Dec 14, 2017
35e25f0
Removed step num from screen reader only elem
cchaos Dec 14, 2017
3cea2bc
Adding default headingElement to step.js
cchaos Dec 15, 2017
906a6bd
Updated changelog
cchaos Dec 15, 2017
b446984
Spelling errors
cchaos Dec 15, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 7 additions & 3 deletions src-docs/src/views/steps/heading_element_steps.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,22 @@ import React from 'react';

import {
EuiSteps,
EuiText
} from '../../../../src/components';

const steps = [
{
title: 'inspect me',
children: <h3>Did you notice the step title is inside a Heading 2 element?</h3>
title: 'Inspect me',
children: <EuiText><h3>Did you notice the step title is inside a Heading 2 element?</h3></EuiText>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Minor one. <EuiText> should be used for blobs of text. In this case, you're only using it for a title, so might want to use <EuiTitle>.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 You're right

}
];

export default () => (
<div>
<h1>Heading 1</h1>
<EuiText><h1>Heading 1</h1></EuiText>

<br/><br/>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use an EuiSpacer here.


<EuiSteps
steps={steps}
headingElement="h2"
Expand Down
12 changes: 6 additions & 6 deletions src-docs/src/views/steps/steps.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,30 +9,30 @@ import {

const firstSetOfSteps = [
{
title: 'step 1',
title: 'Step 1',
children: <p>Do this first</p>
},
{
title: 'step 2',
title: 'Step 2',
children: <p>Then this</p>
},
{
title: 'step 3',
title: 'Step 3',
children: <p>And finally, do this</p>
},
];

const nextSetOfSteps = [
{
title: 'good step',
title: 'Good step',
children: <p>Do this first</p>
},
{
title: 'better step',
title: 'Better step',
children: <p>Then this</p>
},
{
title: 'best step',
title: 'Best step',
children: <p>And finally, do this</p>
},
];
Expand Down
20 changes: 16 additions & 4 deletions src-docs/src/views/steps/steps_example.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -33,7 +37,7 @@ export const StepsExample = {
demo: <Steps />,
},
{
title: 'Heading Element Steps',
title: 'Heading Elements',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we use sentence case?

source: [{
type: GuideSectionTypes.JS,
code: headingElementStepsSource,
Expand All @@ -42,9 +46,17 @@ export const StepsExample = {
code: headingElementStepsHtml,
}],
text: (
<p>
something something better accessibility
</p>
<div>
<p>
To aide with accessibility and hierachical headings,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think aide (noun) should be spelled "aid" (verb).

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah... you might find that you catch a good amount spelling errors with me... I'm trying to be beter...

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

s/beter/better 😹

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh and "hierachical" should be "hierarchical"

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 <EuiCode>h2</EuiCode>
and therefore adds <EuiCode>headingElement=&quot;h2&quot;</EuiCode> to the EuiSteps component.
</p>
<p>
The style of the title will <strong>not</strong> be affected.
</p>
</div>
),
demo: <HeadingElementSteps />,
}],
Expand Down
13 changes: 7 additions & 6 deletions src/components/steps/__snapshots__/step.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,19 +7,20 @@ exports[`EuiStep is rendered 1`] = `
data-test-subj="test subject string"
>
<div>
<div
class="euiStepNumber"
<span
class="euiScreenReaderOnly"
>
1
</div>
Step 1
</span>
<h3
class="euiTitle euiStepTitle"
class="euiTitle euiStep__title"
data-step-num="1"
>
First step
</h3>
</div>
<div
class="euiStepContent"
class="euiStep__content"
>
<p>
Do this
Expand Down
117 changes: 63 additions & 54 deletions src/components/steps/__snapshots__/steps.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,19 +10,20 @@ exports[`EuiSteps renders step title inside "headingElement" element 1`] = `
class="euiStep"
>
<div>
<div
class="euiStepNumber"
<span
class="euiScreenReaderOnly"
>
1
</div>
Step 1
</span>
<h2
class="euiTitle euiStepTitle"
class="euiTitle euiStep__title"
data-step-num="1"
>
first title
</h2>
</div>
<div
class="euiStepContent"
class="euiStep__content"
>
<p>
Do this first
Expand All @@ -33,19 +34,20 @@ exports[`EuiSteps renders step title inside "headingElement" element 1`] = `
class="euiStep"
>
<div>
<div
class="euiStepNumber"
<span
class="euiScreenReaderOnly"
>
2
</div>
Step 2
</span>
<h2
class="euiTitle euiStepTitle"
class="euiTitle euiStep__title"
data-step-num="2"
>
second title
</h2>
</div>
<div
class="euiStepContent"
class="euiStep__content"
>
<p>
Then this
Expand All @@ -56,19 +58,20 @@ exports[`EuiSteps renders step title inside "headingElement" element 1`] = `
class="euiStep"
>
<div>
<div
class="euiStepNumber"
<span
class="euiScreenReaderOnly"
>
3
</div>
Step 3
</span>
<h2
class="euiTitle euiStepTitle"
class="euiTitle euiStep__title"
data-step-num="3"
>
third title
</h2>
</div>
<div
class="euiStepContent"
class="euiStep__content"
>
<p>
And finally, do this
Expand All @@ -88,19 +91,20 @@ exports[`EuiSteps renders steps 1`] = `
class="euiStep"
>
<div>
<div
class="euiStepNumber"
<span
class="euiScreenReaderOnly"
>
1
</div>
Step 1
</span>
<p
class="euiTitle euiStepTitle"
class="euiTitle euiStep__title"
data-step-num="1"
>
first title
</p>
</div>
<div
class="euiStepContent"
class="euiStep__content"
>
<p>
Do this first
Expand All @@ -111,19 +115,20 @@ exports[`EuiSteps renders steps 1`] = `
class="euiStep"
>
<div>
<div
class="euiStepNumber"
<span
class="euiScreenReaderOnly"
>
2
</div>
Step 2
</span>
<p
class="euiTitle euiStepTitle"
class="euiTitle euiStep__title"
data-step-num="2"
>
second title
</p>
</div>
<div
class="euiStepContent"
class="euiStep__content"
>
<p>
Then this
Expand All @@ -134,19 +139,20 @@ exports[`EuiSteps renders steps 1`] = `
class="euiStep"
>
<div>
<div
class="euiStepNumber"
<span
class="euiScreenReaderOnly"
>
3
</div>
Step 3
</span>
<p
class="euiTitle euiStepTitle"
class="euiTitle euiStep__title"
data-step-num="3"
>
third title
</p>
</div>
<div
class="euiStepContent"
class="euiStep__content"
>
<p>
And finally, do this
Expand All @@ -166,19 +172,20 @@ exports[`EuiSteps renders steps with firstStepNumber 1`] = `
class="euiStep"
>
<div>
<div
class="euiStepNumber"
<span
class="euiScreenReaderOnly"
>
10
</div>
Step 10
</span>
<p
class="euiTitle euiStepTitle"
class="euiTitle euiStep__title"
data-step-num="10"
>
first title
</p>
</div>
<div
class="euiStepContent"
class="euiStep__content"
>
<p>
Do this first
Expand All @@ -189,19 +196,20 @@ exports[`EuiSteps renders steps with firstStepNumber 1`] = `
class="euiStep"
>
<div>
<div
class="euiStepNumber"
<span
class="euiScreenReaderOnly"
>
11
</div>
Step 11
</span>
<p
class="euiTitle euiStepTitle"
class="euiTitle euiStep__title"
data-step-num="11"
>
second title
</p>
</div>
<div
class="euiStepContent"
class="euiStep__content"
>
<p>
Then this
Expand All @@ -212,19 +220,20 @@ exports[`EuiSteps renders steps with firstStepNumber 1`] = `
class="euiStep"
>
<div>
<div
class="euiStepNumber"
<span
class="euiScreenReaderOnly"
>
12
</div>
Step 12
</span>
<p
class="euiTitle euiStepTitle"
class="euiTitle euiStep__title"
data-step-num="12"
>
third title
</p>
</div>
<div
class="euiStepContent"
class="euiStep__content"
>
<p>
And finally, do this
Expand Down
Loading