From ac4c0b7f020c05aeffa734a5c1dbf0488a402fc7 Mon Sep 17 00:00:00 2001 From: Caroline Horn <549577+cchaos@users.noreply.github.com> Date: Tue, 7 Aug 2018 11:36:12 -0400 Subject: [PATCH] Allowing more status options for `EuiSteps` (#1088) --- CHANGELOG.md | 2 + .../components/guide_section/guide_section.js | 12 +- src-docs/src/views/steps/status.js | 57 +++++++++- src-docs/src/views/steps/steps_example.js | 17 ++- .../switch/__snapshots__/switch.test.js.snap | 11 +- .../icon/__snapshots__/icon.test.js.snap | 11 +- src/components/icon/assets/check.svg | 7 +- .../steps/__snapshots__/step.test.js.snap | 4 +- .../step_horizontal.test.js.snap | 2 +- .../__snapshots__/step_number.test.js.snap | 106 ++++++++++++++++++ .../steps/__snapshots__/steps.test.js.snap | 48 ++++---- .../steps_horizontal.test.js.snap | 22 ++-- src/components/steps/_index.scss | 19 +--- src/components/steps/_mixins.scss | 13 +++ src/components/steps/_step_number.scss | 40 +++++++ src/components/steps/_steps.scss | 18 +-- src/components/steps/_steps_horizontal.scss | 20 +--- src/components/steps/_variables.scss | 10 ++ src/components/steps/step.js | 31 ++--- src/components/steps/step_horizontal.js | 29 +++-- src/components/steps/step_number.js | 67 +++++++++++ src/components/steps/step_number.test.js | 46 ++++++++ src/components/steps/steps.test.js | 3 +- .../global_toast_list.test.js.snap | 11 +- 24 files changed, 438 insertions(+), 168 deletions(-) create mode 100644 src/components/steps/__snapshots__/step_number.test.js.snap create mode 100644 src/components/steps/_mixins.scss create mode 100644 src/components/steps/_step_number.scss create mode 100644 src/components/steps/_variables.scss create mode 100644 src/components/steps/step_number.js create mode 100644 src/components/steps/step_number.test.js diff --git a/CHANGELOG.md b/CHANGELOG.md index e04188b8b50..b0ce63a9b25 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ - Added `!default` to border SASS props ([#1079](https://github.com/elastic/eui/pull/1079)) - Added `repositionOnScroll` prop to `EuiPopover` which enables repositioning the popover when the window is scrolled. ([#1064](https://github.com/elastic/eui/pull/1064)) - Allow `_` and `*` characters to be used in `EuiSearchBar` query terms ([#1058](https://github.com/elastic/eui/pull/1058)) +- Added more `status` options for `EuiSteps` ([#1088](https://github.com/elastic/eui/pull/1088)) **Bug fixes** @@ -13,6 +14,7 @@ - Added `resize-observer-polyfill` as a dependency (was previously a devDependency) ([#1085](https://github.com/elastic/eui/pull/1085)) - Fixed `EuiBasicTable` to inform its parent about a selection change triggered by a different set of `items` ([#1086](https://github.com/elastic/eui/pull/1086)) - Fixed width of `EuiFilterGroup`'s popover ([#1078](https://github.com/elastic/eui/pull/1078)) +- Fixed `EuiStepsHorizontal`'s title wrapping in IE ([#1088](https://github.com/elastic/eui/pull/1088)) ## [`3.3.0`](https://github.com/elastic/eui/tree/v3.3.0) diff --git a/src-docs/src/components/guide_section/guide_section.js b/src-docs/src/components/guide_section/guide_section.js index 7c6efd3464f..28fc04832e3 100644 --- a/src-docs/src/components/guide_section/guide_section.js +++ b/src-docs/src/components/guide_section/guide_section.js @@ -162,24 +162,28 @@ export class GuideSection extends Component { } = props[propName]; let humanizedName = ( - {propName} + {propName} ); if (required) { humanizedName = ( - {humanizedName} (required) + {humanizedName} (required) ); } const humanizedType = humanizeType(type); - const typeMarkup = markup(humanizedType); + const typeMarkup = ({markup(humanizedType)}); const descriptionMarkup = markup(propDescription); let defaultValueMarkup = ''; if (defaultValue) { - defaultValueMarkup = [ {defaultValue.value} ]; + defaultValueMarkup = [( + + {defaultValue.value} + + )]; if (defaultValue.comment) { defaultValueMarkup.push(`(${defaultValue.comment})`); } diff --git a/src-docs/src/views/steps/status.js b/src-docs/src/views/steps/status.js index 61d03bc70b6..1164cf95c30 100644 --- a/src-docs/src/views/steps/status.js +++ b/src-docs/src/views/steps/status.js @@ -20,6 +20,9 @@ export default class extends Component { }; this.handleComplete = this.handleComplete.bind(this); + this.handleWarning = this.handleWarning.bind(this); + this.handleDanger = this.handleDanger.bind(this); + this.makeIncomplete = this.makeIncomplete.bind(this); } handleComplete() { @@ -28,13 +31,57 @@ export default class extends Component { }); } + handleWarning() { + this.setState({ + status: 'warning', + }); + } + + handleDanger() { + this.setState({ + status: 'danger', + }); + } + + makeIncomplete() { + this.setState({ + status: 'incomplete', + }); + } + render() { - let button; - if (this.state.status === 'incomplete') { - button = ( + let completeButton; + if (this.state.status !== 'complete') { + completeButton = ( You complete me ); + } else { + completeButton = ( + Reset + ); + } + + let warningButton; + if (this.state.status !== 'warning') { + warningButton = ( + Uh oh! + ); + } else { + warningButton = ( + Reset + ); + } + + let dangerButton; + if (this.state.status !== 'danger') { + dangerButton = ( + Something terrible + ); + } else { + dangerButton = ( + Reset + ); } const firstSetOfSteps = [ @@ -47,10 +94,10 @@ export default class extends Component { children: (

- I am a fancy button just waiting to be pushed! + We are fancy buttons just waiting to be pushed!

- {button} + {completeButton} {warningButton} {dangerButton} ), status: this.state.status, diff --git a/src-docs/src/views/steps/steps_example.js b/src-docs/src/views/steps/steps_example.js index aa7fb26eb72..618ba2f6505 100644 --- a/src-docs/src/views/steps/steps_example.js +++ b/src-docs/src/views/steps/steps_example.js @@ -10,8 +10,14 @@ import { EuiCode, EuiSteps, EuiStep, + EuiSubSteps, + EuiStepsHorizontal, } from '../../../../src/components'; +import { + EuiStepHorizontal, +} from '../../../../src/components/steps/step_horizontal'; + import Steps from './steps'; const stepsSource = require('!!raw-loader!./steps'); const stepsHtml = renderToHtml(Steps); @@ -67,6 +73,7 @@ export const StepsExample = {

), demo: , + props: { EuiSubSteps }, }, { title: 'Heading elements', @@ -103,9 +110,10 @@ export const StepsExample = { }], text: (

- Steps can optionally include status prop with - a value of complete or incomplete. This - is used mostly as a final step when you need to make some sort of final check. + Steps can optionally include status prop that will alter the look of the number prefix. + The options + are incomplete, complete, warning and danger. + This is used mostly as a final step when you need to make some sort of final check.

), demo: , @@ -122,6 +130,7 @@ export const StepsExample = { text: (

For use when forms/setup instructions can and should be split into multiple pages.

), - demo: + demo: , + props: { EuiStepsHorizontal, EuiStepHorizontal }, }], }; diff --git a/src/components/form/switch/__snapshots__/switch.test.js.snap b/src/components/form/switch/__snapshots__/switch.test.js.snap index ff45824f418..c4f178c0c99 100644 --- a/src/components/form/switch/__snapshots__/switch.test.js.snap +++ b/src/components/form/switch/__snapshots__/switch.test.js.snap @@ -45,17 +45,10 @@ exports[`EuiSwitch is rendered 1`] = ` height="16" viewBox="0 0 16 16" width="16" - xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" > - - - - diff --git a/src/components/icon/__snapshots__/icon.test.js.snap b/src/components/icon/__snapshots__/icon.test.js.snap index 8bee34caa7c..7c41b9fbe61 100644 --- a/src/components/icon/__snapshots__/icon.test.js.snap +++ b/src/components/icon/__snapshots__/icon.test.js.snap @@ -765,17 +765,10 @@ exports[`EuiIcon props type check is rendered 1`] = ` height="16" viewBox="0 0 16 16" width="16" - xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" > - - - - `; diff --git a/src/components/icon/assets/check.svg b/src/components/icon/assets/check.svg index 61cdad5fdef..7e747e5085c 100644 --- a/src/components/icon/assets/check.svg +++ b/src/components/icon/assets/check.svg @@ -1,8 +1,3 @@ - - - - - - + diff --git a/src/components/steps/__snapshots__/step.test.js.snap b/src/components/steps/__snapshots__/step.test.js.snap index bf044f3553a..caf632c20aa 100644 --- a/src/components/steps/__snapshots__/step.test.js.snap +++ b/src/components/steps/__snapshots__/step.test.js.snap @@ -9,10 +9,10 @@ exports[`EuiStep is rendered 1`] = ` - Step + Step
1
diff --git a/src/components/steps/__snapshots__/step_horizontal.test.js.snap b/src/components/steps/__snapshots__/step_horizontal.test.js.snap index 216a9b4fc0d..fc3d40cedbd 100644 --- a/src/components/steps/__snapshots__/step_horizontal.test.js.snap +++ b/src/components/steps/__snapshots__/step_horizontal.test.js.snap @@ -17,7 +17,7 @@ exports[`EuiStepHorizontal is rendered 1`] = ` Step
1
diff --git a/src/components/steps/__snapshots__/step_number.test.js.snap b/src/components/steps/__snapshots__/step_number.test.js.snap new file mode 100644 index 00000000000..a10762193de --- /dev/null +++ b/src/components/steps/__snapshots__/step_number.test.js.snap @@ -0,0 +1,106 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EuiStepNumber is rendered 1`] = ` +
+`; + +exports[`EuiStepNumber props isHollow is rendered 1`] = ` +
+`; + +exports[`EuiStepNumber props status complete is rendered 1`] = ` +
+ + + +
+`; + +exports[`EuiStepNumber props status danger is rendered 1`] = ` +
+ + + + + + +
+`; + +exports[`EuiStepNumber props status disabled is rendered 1`] = ` +
+ 1 +
+`; + +exports[`EuiStepNumber props status incomplete is rendered 1`] = ` +
+ 1 +
+`; + +exports[`EuiStepNumber props status warning is rendered 1`] = ` +
+ + + + + + +
+`; diff --git a/src/components/steps/__snapshots__/steps.test.js.snap b/src/components/steps/__snapshots__/steps.test.js.snap index 4f2467bce8c..e4cc2f380d7 100644 --- a/src/components/steps/__snapshots__/steps.test.js.snap +++ b/src/components/steps/__snapshots__/steps.test.js.snap @@ -12,10 +12,10 @@ exports[`EuiSteps renders step title inside "headingElement" element 1`] = ` - Step + Step
1
@@ -38,10 +38,10 @@ exports[`EuiSteps renders step title inside "headingElement" element 1`] = ` - Step + Step
2
@@ -64,13 +64,11 @@ exports[`EuiSteps renders step title inside "headingElement" element 1`] = ` - Step + Incomplete Step
- 3 -
+ class="euiStepNumber euiStepNumber--incomplete euiStepNumber-isHollow euiStep__circle" + />

@@ -99,10 +97,10 @@ exports[`EuiSteps renders steps 1`] = ` - Step + Step
1
@@ -125,10 +123,10 @@ exports[`EuiSteps renders steps 1`] = ` - Step + Step
2
@@ -151,13 +149,11 @@ exports[`EuiSteps renders steps 1`] = ` - Step + Incomplete Step
- 3 -
+ class="euiStepNumber euiStepNumber--incomplete euiStepNumber-isHollow euiStep__circle" + />

@@ -186,10 +182,10 @@ exports[`EuiSteps renders steps with firstStepNumber 1`] = ` - Step + Step

10
@@ -212,10 +208,10 @@ exports[`EuiSteps renders steps with firstStepNumber 1`] = ` - Step + Step
11
@@ -238,13 +234,11 @@ exports[`EuiSteps renders steps with firstStepNumber 1`] = ` - Step + Incomplete Step
- 12 -
+ class="euiStepNumber euiStepNumber--incomplete euiStepNumber-isHollow euiStep__circle" + />

diff --git a/src/components/steps/__snapshots__/steps_horizontal.test.js.snap b/src/components/steps/__snapshots__/steps_horizontal.test.js.snap index 0676311b40a..960fec12695 100644 --- a/src/components/steps/__snapshots__/steps_horizontal.test.js.snap +++ b/src/components/steps/__snapshots__/steps_horizontal.test.js.snap @@ -21,25 +21,19 @@ exports[`EuiStepsHorizontal is rendered 1`] = ` Step

- - - -
@@ -63,7 +57,7 @@ exports[`EuiStepsHorizontal is rendered 1`] = ` Step
2
@@ -87,7 +81,7 @@ exports[`EuiStepsHorizontal is rendered 1`] = ` Step
3
@@ -111,7 +105,7 @@ exports[`EuiStepsHorizontal is rendered 1`] = ` Step
4
diff --git a/src/components/steps/_index.scss b/src/components/steps/_index.scss index a30bd442990..68803f97cf9 100644 --- a/src/components/steps/_index.scss +++ b/src/components/steps/_index.scss @@ -1,20 +1,7 @@ -$euiStepNumberSize: $euiSizeXL !default; -$euiStepNumberMargin: $euiSize !default; - -@mixin createStepsNumber(){ - display: inline-block; - @include size($euiStepNumberSize); - line-height: $euiStepNumberSize; - border-radius: $euiStepNumberSize; - text-align: center; - - color: $euiColorEmptyShade; - background-color: $euiColorPrimary; - - font-size: $euiFontSize; - font-weight: $euiFontWeightMedium; -} +@import 'variables'; +@import 'mixins'; +@import 'step_number'; @import 'steps'; @import 'sub_steps'; @import 'steps_horizontal'; diff --git a/src/components/steps/_mixins.scss b/src/components/steps/_mixins.scss new file mode 100644 index 00000000000..55a9dbc1fe0 --- /dev/null +++ b/src/components/steps/_mixins.scss @@ -0,0 +1,13 @@ +@mixin createStepsNumber(){ + display: inline-block; + @include size($euiStepNumberSize); + line-height: $euiStepNumberSize; + border-radius: $euiStepNumberSize; + text-align: center; + + color: $euiColorEmptyShade; + background-color: $euiColorPrimary; + + font-size: $euiFontSize; + font-weight: $euiFontWeightMedium; +} diff --git a/src/components/steps/_step_number.scss b/src/components/steps/_step_number.scss new file mode 100644 index 00000000000..9959489e4b5 --- /dev/null +++ b/src/components/steps/_step_number.scss @@ -0,0 +1,40 @@ +.euiStepNumber { + @include createStepsNumber(); + + .euiStepNumber__icon { + position: relative; + top: -2px; + } + + &--complete { + // Thicken the checkmark but adding a slight stroke. + .euiStepNumber__icon { + stroke: currentColor; + stroke-width: .5px; + } + } + + &.euiStepNumber-isHollow { + background-color: transparent; + border: 2px solid $euiColorPrimary; + } + + // Create modifiers based upon the map + @each $name, $color in $euiStepStatusColorsToFade { + &--#{$name} { + $backgroundColor: $color; + @if (saturation($color) > 0%) { + $backgroundColor: tintOrShade($color, 90%, 70%); + } + + $textColor: makeHighContrastColor($color, $backgroundColor); + + color: $textColor; + background-color: $backgroundColor; + + &.euiStepNumber-isHollow { + border-color: $color; + } + } + } +} diff --git a/src/components/steps/_steps.scss b/src/components/steps/_steps.scss index 2343c6d42cb..d3f5f23dc74 100644 --- a/src/components/steps/_steps.scss +++ b/src/components/steps/_steps.scss @@ -13,24 +13,18 @@ } .euiStep__circle { - @include createStepsNumber(); - margin-right: $euiStepNumberMargin; vertical-align: top; /* 1 */ - &.euiStep__circle--incomplete { - background-color: transparent; - border: solid 2px $euiColorPrimary; - color: $euiColorDarkShade; - } - - &.euiStep__circle--complete { + &[class*="complete"], + &[class*="warning"], + &[class*="danger"] { animation: euiGrow $euiAnimSpeedFast $euiAnimSlightBounce; } - .euiStep__circleIcon { - position: relative; - top: -2px; + &[class*="incomplete"] { + border-color: $euiColorPrimary; + animation: none; } } diff --git a/src/components/steps/_steps_horizontal.scss b/src/components/steps/_steps_horizontal.scss index ae58f5585b4..ea554bc4cbb 100644 --- a/src/components/steps/_steps_horizontal.scss +++ b/src/components/steps/_steps_horizontal.scss @@ -32,8 +32,6 @@ &:focus:not(.euiStepHorizontal-isDisabled), &:hover:not(.euiStepHorizontal-isDisabled) { .euiStepHorizontal__number { - background: $euiColorPrimary; - color: $euiColorEmptyShade; transition: background-color $euiAnimSpeedNormal $euiAnimSlightResistance, color $euiAnimSpeedNormal $euiAnimSlightResistance; @include euiFocusRing(large); @@ -81,16 +79,9 @@ } .euiStepHorizontal__number { - @include createStepsNumber; position: relative; /* 1 */ z-index: $euiZLevel1; /* 1 */ transition: all $euiAnimSpeedFast ease-in-out; - - // if it contains an icon, it needs to shift up a couple px - > .euiIcon { - position: relative; - top: -2px; - } } .euiStepHorizontal__title { @@ -98,20 +89,13 @@ margin-top: $euiSizeS; font-weight: $euiFontWeightRegular; text-align: center; + max-width: 100%; // IE Fix for wrapping text .euiStepHorizontal-isDisabled & { color: $euiColorDarkShade; } } -// Incomplete state -.euiStepHorizontal-isIncomplete { - .euiStepHorizontal__number { - background-color: $euiColorLightShade; - color: $euiColorDarkShade; - } -} - // Complete state .euiStepHorizontal-isComplete { &::before, @@ -122,7 +106,7 @@ // Selected state .euiStepHorizontal-isSelected { - .euiStepHorizontal__number { + .euiStepHorizontal__number:not([class*="danger"]):not([class*="warning"]) { @include euiSlightShadow(desaturate($euiColorPrimary, 20%)); } diff --git a/src/components/steps/_variables.scss b/src/components/steps/_variables.scss new file mode 100644 index 00000000000..af63cf1334c --- /dev/null +++ b/src/components/steps/_variables.scss @@ -0,0 +1,10 @@ +$euiStepNumberSize: $euiSizeXL !default; +$euiStepNumberMargin: $euiSize !default; + +// Modifier naming and colors. +$euiStepStatusColorsToFade: ( + warning: $euiColorWarning, + danger: $euiColorDanger, + disabled: $euiColorLightShade, + incomplete: $euiColorLightShade, +) !default; diff --git a/src/components/steps/step.js b/src/components/steps/step.js index e5c406c5339..f0976663392 100644 --- a/src/components/steps/step.js +++ b/src/components/steps/step.js @@ -11,8 +11,9 @@ import { } from '../title'; import { - EuiIcon, -} from '../icon'; + STATUS, + EuiStepNumber, +} from './step_number'; export const EuiStep = ({ className, @@ -24,19 +25,10 @@ export const EuiStep = ({ ...rest }) => { const classes = classNames('euiStep', className); - const circleClasses = classNames( - 'euiStep__circle', - { - 'euiStep__circle--complete': (status === 'complete'), - 'euiStep__circle--incomplete': (status === 'incomplete'), - } - ); - let numberOrIcon; - if (status === 'complete') { - numberOrIcon = ; - } else if (status !== 'incomplete') { - numberOrIcon = step; + let screenReaderPrefix; + if (status === 'incomplete') { + screenReaderPrefix = 'Incomplete'; } return ( @@ -45,11 +37,9 @@ export const EuiStep = ({ {...rest} > - Step + {screenReaderPrefix} Step -
- {numberOrIcon} -
+ {React.createElement(headingElement, null, title)} @@ -66,9 +56,10 @@ export const EuiStep = ({ EuiStep.propTypes = { children: PropTypes.node.isRequired, /** - * Will replace the number provided in props.step with alternate styling + * Will replace the number provided in props.step with alternate styling. + * Options: `complete`, `incomplete`, `warning`, `danger`, `disabled` */ - status: PropTypes.oneOf(['complete', 'incomplete']), + status: PropTypes.oneOf(STATUS), /** * The number of the step in the list of steps */ diff --git a/src/components/steps/step_horizontal.js b/src/components/steps/step_horizontal.js index eb46a344acb..b4b9e122a96 100644 --- a/src/components/steps/step_horizontal.js +++ b/src/components/steps/step_horizontal.js @@ -7,7 +7,10 @@ import { EuiKeyboardAccessible, } from '../accessibility'; -import { EuiIcon } from '../icon'; +import { + STATUS, + EuiStepNumber, +} from './step_number'; export const EuiStepHorizontal = ({ className, @@ -17,6 +20,7 @@ export const EuiStepHorizontal = ({ isComplete, onClick, disabled, + status, ...rest }) => { const classes = classNames('euiStepHorizontal', className, { @@ -26,19 +30,18 @@ export const EuiStepHorizontal = ({ 'euiStepHorizontal-isDisabled': disabled, }); - let numberNode; let titleAppendix = ''; if (disabled) { - numberNode = step; + status = 'disabled'; titleAppendix = ' is disabled'; } else if (isComplete) { - numberNode = ( - - ); + status = 'complete'; titleAppendix = ' is complete'; - } else { - numberNode = step; + } else if (isSelected) { + status = status; + } else if (!isComplete && !status) { + status = 'incomplete'; } const onStepClick = e => { @@ -65,9 +68,7 @@ export const EuiStepHorizontal = ({ >
Step
 -
- {numberNode} -
+
{title} @@ -85,6 +86,12 @@ EuiStepHorizontal.propTypes = { title: PropTypes.node, className: PropTypes.string, disabled: PropTypes.bool, + /** + * Will replace the number provided in props.step with alternate styling. + * Options: `complete`, `incomplete`, `warning`, `danger`, `disabled`. + * The `isSelected`, `isComplete`, and `disabled` props will override these. + */ + status: PropTypes.oneOf(STATUS), }; EuiStepHorizontal.defaultProps = { diff --git a/src/components/steps/step_number.js b/src/components/steps/step_number.js new file mode 100644 index 00000000000..5658f10a7fc --- /dev/null +++ b/src/components/steps/step_number.js @@ -0,0 +1,67 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +import { + EuiIcon, +} from '../icon'; + +const statusToClassNameMap = { + complete: 'euiStepNumber--complete', + incomplete: 'euiStepNumber--incomplete', + warning: 'euiStepNumber--warning', + danger: 'euiStepNumber--danger', + disabled: 'euiStepNumber--disabled', +}; + +export const STATUS = Object.keys(statusToClassNameMap); + +export const EuiStepNumber = ({ + className, + status, + number, + isHollow, + ...rest +}) => { + const classes = classNames( + 'euiStepNumber', + statusToClassNameMap[status], + { + 'euiStepNumber-isHollow': isHollow, + }, + className, + ); + + let numberOrIcon; + if (status === 'complete') { + numberOrIcon = ; + } else if (status === 'warning') { + numberOrIcon = ; + } else if (status === 'danger') { + numberOrIcon = ; + } else if (!isHollow) { + numberOrIcon = number; + } + + return ( +
+ {numberOrIcon} +
+ ); +}; + +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, +}; diff --git a/src/components/steps/step_number.test.js b/src/components/steps/step_number.test.js new file mode 100644 index 00000000000..ce4360cc41d --- /dev/null +++ b/src/components/steps/step_number.test.js @@ -0,0 +1,46 @@ +import React from 'react'; +import { render } from 'enzyme'; +import { requiredProps } from '../../test'; + +import { + STATUS, + EuiStepNumber, +} from './step_number'; + +describe('EuiStepNumber', () => { + test('is rendered', () => { + const component = render( + + ); + + expect(component) + .toMatchSnapshot(); + }); + + describe('props', () => { + describe('isHollow', () => { + it('is rendered', () => { + const component = render( + + ); + + expect(component) + .toMatchSnapshot(); + }); + }); + + describe('status', () => { + STATUS.forEach(status => { + test(`${status} is rendered`, () => { + const component = render( + + ); + + expect(component) + .toMatchSnapshot(); + }); + }); + }); + + }); +}); diff --git a/src/components/steps/steps.test.js b/src/components/steps/steps.test.js index 4afb3ee40f4..2eae638034a 100644 --- a/src/components/steps/steps.test.js +++ b/src/components/steps/steps.test.js @@ -15,7 +15,8 @@ const steps = [ }, { title: 'third title', - children:

And finally, do this

+ children:

And finally, do this

, + status: 'incomplete', }, ]; diff --git a/src/components/toast/__snapshots__/global_toast_list.test.js.snap b/src/components/toast/__snapshots__/global_toast_list.test.js.snap index 20b88a26cdb..5677671d573 100644 --- a/src/components/toast/__snapshots__/global_toast_list.test.js.snap +++ b/src/components/toast/__snapshots__/global_toast_list.test.js.snap @@ -34,17 +34,10 @@ exports[`EuiGlobalToastList props toasts is rendered 1`] = ` height="16" viewBox="0 0 16 16" width="16" - xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" > - - - -