From 7eca45a4a9b5a4faa53c22eb94ba4c99f7a291ea Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 10 Jan 2018 14:58:05 -0500 Subject: [PATCH 01/12] Adding complex steps example --- src-docs/src/views/steps/steps.js | 8 --- src-docs/src/views/steps/steps_complex.js | 81 +++++++++++++++++++++++ src-docs/src/views/steps/steps_example.js | 20 ++++++ 3 files changed, 101 insertions(+), 8 deletions(-) create mode 100644 src-docs/src/views/steps/steps_complex.js diff --git a/src-docs/src/views/steps/steps.js b/src-docs/src/views/steps/steps.js index f86813d2695e..f02baf1f823e 100644 --- a/src-docs/src/views/steps/steps.js +++ b/src-docs/src/views/steps/steps.js @@ -16,10 +16,6 @@ const firstSetOfSteps = [ title: 'Step 2', children:

Then this

}, - { - title: 'Step 3', - children:

And finally, do this

- }, ]; const nextSetOfSteps = [ @@ -31,10 +27,6 @@ const nextSetOfSteps = [ title: 'Better step', children:

Then this

}, - { - title: 'Best step', - children:

And finally, do this

- }, ]; export default () => ( diff --git a/src-docs/src/views/steps/steps_complex.js b/src-docs/src/views/steps/steps_complex.js new file mode 100644 index 000000000000..f8598c5ef5db --- /dev/null +++ b/src-docs/src/views/steps/steps_complex.js @@ -0,0 +1,81 @@ +import React from 'react'; + +import { + EuiCode, + EuiSteps, + EuiText, + EuiCodeBlock, +} from '../../../../src/components'; + +const steps = [ + { + title: 'Step 1 has intro plus code snippet', + children: ( + +

Run this code snippet to install things.

+ + npm install + + + ) + }, + { + title: 'Step 2 has sub steps', + children: ( + +

In order to complete this step, do the following things in order.

+
    +
  1. Do thing 1
    2. +
  2. Do thing 2
    3. +
  3. Do thing 3
    4. +
+

Here are some bullet point reminders.

+ + + ) + }, + { + title: 'Step 3 has an intro and one line instruction', + children: ( + +

Now that you've completed step 2, go find the thing.

+

+ Go to Overview >> Endpoints note + Elasticsearch as <thing>. +

+ + ) + }, + { + title: 'The last step has two options', + children: ( + +

Option 1: If you have this type of instance

+
    +
  1. Do thing 1
    2. +
  2. Do thing 2
    3. +
  3. Do thing 3
    4. +
+

Option 2: If you have the other type of instance

+
    +
  1. Do thing 1
    2. +
  2. Do thing 2
    3. +
  3. Do thing 3
    4. +
+ + ) + }, +]; + +export default () => ( +
+ +
+); diff --git a/src-docs/src/views/steps/steps_example.js b/src-docs/src/views/steps/steps_example.js index d88e81a3bf4d..c14edb8dba1b 100644 --- a/src-docs/src/views/steps/steps_example.js +++ b/src-docs/src/views/steps/steps_example.js @@ -15,6 +15,10 @@ import Steps from './steps'; const stepsSource = require('!!raw-loader!./steps'); const stepsHtml = renderToHtml(Steps); +import StepsComplex from './steps_complex'; +const stepsComplexSource = require('!!raw-loader!./steps_complex'); +const stepsComplexHtml = renderToHtml(StepsComplex); + import HeadingElementSteps from './heading_element_steps'; const headingElementStepsSource = require('!!raw-loader!./heading_element_steps'); const headingElementStepsHtml = renderToHtml(HeadingElementSteps); @@ -38,6 +42,22 @@ export const StepsExample = { props: { EuiSteps }, demo: , }, + { + title: 'Complex steps', + source: [{ + type: GuideSectionTypes.JS, + code: stepsComplexSource, + }, { + type: GuideSectionTypes.HTML, + code: stepsComplexHtml, + }], + text: ( +

+ Here's how to handle complex content within steps. +

+ ), + demo: , + }, { title: 'Heading elements', source: [{ From 57a2692173c55e989d439e8879ae903d225ce804 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 7 Feb 2018 13:56:02 -0500 Subject: [PATCH 02/12] Added a class of `.euiStep__subSteps` to style substep groupings --- src-docs/src/views/steps/steps_complex.js | 38 +++++++++++++---------- src/components/steps/_steps.scss | 24 ++++++++++++-- 2 files changed, 43 insertions(+), 19 deletions(-) diff --git a/src-docs/src/views/steps/steps_complex.js b/src-docs/src/views/steps/steps_complex.js index f8598c5ef5db..a6cbcff04ae9 100644 --- a/src-docs/src/views/steps/steps_complex.js +++ b/src-docs/src/views/steps/steps_complex.js @@ -24,11 +24,13 @@ const steps = [ children: (

In order to complete this step, do the following things in order.

-
    -
  1. Do thing 1
    2. -
  2. Do thing 2
    3. -
  3. Do thing 3
    4. -
+
+
    +
  1. Do thing 1
    2. +
  2. Do thing 2
    3. +
  3. Do thing 3
    4. +
+

Here are some bullet point reminders.

  • Reminder 1
    • @@ -43,7 +45,7 @@ const steps = [ children: (

    Now that you've completed step 2, go find the thing.

    -

    +

    Go to Overview >> Endpoints note Elasticsearch as <thing>.

    @@ -55,17 +57,21 @@ const steps = [ children: (

    Option 1: If you have this type of instance

    -
      -
    1. Do thing 1
      2. -
    2. Do thing 2
      3. -
    3. Do thing 3
      4. -
    +
    +
      +
    1. Do thing 1
      2. +
    2. Do thing 2
      3. +
    3. Do thing 3
      4. +
    +

    Option 2: If you have the other type of instance

    -
      -
    1. Do thing 1
      2. -
    2. Do thing 2
      3. -
    3. Do thing 3
      4. -
    +
    +
      +
    1. Do thing 1
      2. +
    2. Do thing 2
      3. +
    3. Do thing 3
      4. +
    +
    ) }, diff --git a/src/components/steps/_steps.scss b/src/components/steps/_steps.scss index 6343ced93861..65cc68f6289a 100644 --- a/src/components/steps/_steps.scss +++ b/src/components/steps/_steps.scss @@ -24,7 +24,7 @@ $euiStepNumberMargin: $euiSize !default; border-radius: $euiStepNumberSize; margin-right: $euiStepNumberMargin; text-align: center; - + color: $euiColorEmptyShade; background-color: $euiColorPrimary; @@ -37,10 +37,28 @@ $euiStepNumberMargin: $euiSize !default; 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 + } + + // add shading to callout substeps within the content + .euiStep__subSteps { + padding: $euiSize; + background-color: tint($euiColorPrimary, 93%); + margin-bottom: $euiSize; + + > *:last-child { + margin-bottom: 0; + } + + // change ordered list from numbers to lowercase letters + .euiText & ol { + list-style-type: lower-alpha; + } + } + + From 666e6eb3156252d92c7edb22024d108d68cbe603 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 7 Feb 2018 14:33:20 -0500 Subject: [PATCH 03/12] Added files and used Tabs as starting point for Horizontal Steps --- src-docs/src/views/steps/steps_example.js | 18 +++++ src-docs/src/views/steps/steps_horizontal.js | 72 +++++++++++++++++++ src/components/index.js | 1 + src/components/steps/_index.scss | 1 + src/components/steps/_steps_horizontal.scss | 3 + src/components/steps/index.js | 4 ++ src/components/steps/step_horizontal.js | 46 ++++++++++++ src/components/steps/steps_horizontal.js | 29 ++++++++ src/components/steps/steps_horizontal.test.js | 16 +++++ 9 files changed, 190 insertions(+) create mode 100644 src-docs/src/views/steps/steps_horizontal.js create mode 100644 src/components/steps/_steps_horizontal.scss create mode 100644 src/components/steps/step_horizontal.js create mode 100644 src/components/steps/steps_horizontal.js create mode 100644 src/components/steps/steps_horizontal.test.js diff --git a/src-docs/src/views/steps/steps_example.js b/src-docs/src/views/steps/steps_example.js index c14edb8dba1b..0af093d146ae 100644 --- a/src-docs/src/views/steps/steps_example.js +++ b/src-docs/src/views/steps/steps_example.js @@ -23,6 +23,10 @@ import HeadingElementSteps from './heading_element_steps'; const headingElementStepsSource = require('!!raw-loader!./heading_element_steps'); const headingElementStepsHtml = renderToHtml(HeadingElementSteps); +import StepsHorizontal from './steps_horizontal'; +const stepsHorizontalSource = require('!!raw-loader!./steps_horizontal'); +const stepsHorizontalHtml = renderToHtml(StepsHorizontal); + export const StepsExample = { title: 'Steps', sections: [{ @@ -81,5 +85,19 @@ export const StepsExample = { ), demo: , + }, + { + title: 'Horizontal', + source: [{ + type: GuideSectionTypes.JS, + code: stepsHorizontalSource, + }, { + type: GuideSectionTypes.HTML, + code: stepsHorizontalHtml, + }], + text: ( +

    Description needed: how to use the StepsHorizontal component.

    + ), + demo: }], }; diff --git a/src-docs/src/views/steps/steps_horizontal.js b/src-docs/src/views/steps/steps_horizontal.js new file mode 100644 index 000000000000..4f2b542e00dd --- /dev/null +++ b/src-docs/src/views/steps/steps_horizontal.js @@ -0,0 +1,72 @@ +import React from 'react'; + +import { + EuiTabs, + EuiTab, + EuiSpacer, +} from '../../../../src/components'; + +class EuiHorizontalStepsExample extends React.Component { + constructor(props) { + super(props); + + this.tabs = [{ + id: 'cobalt', + name: 'Cobalt', + disabled: false, + }, { + id: 'dextrose', + name: 'Dextrose', + disabled: false, + }, { + id: 'hydrogen', + name: 'Hydrogen', + disabled: true, + }, { + id: 'monosodium_glutammate', + name: 'Monosodium Glutamate', + disabled: false, + }]; + + this.state = { + selectedTabId: 'cobalt', + }; + } + + onSelectedTabChanged = id => { + this.setState({ + selectedTabId: id, + }); + } + + renderTabs() { + return this.tabs.map((tab, index) => ( + this.onSelectedTabChanged(tab.id)} + isSelected={tab.id === this.state.selectedTabId} + disabled={tab.disabled} + key={index} + > + {tab.name} + + )); + } + + render() { + return ( +
    + + {this.renderTabs()} + + + + + + {this.renderTabs()} + +
    + ); + } +} + +export default EuiHorizontalStepsExample; diff --git a/src/components/index.js b/src/components/index.js index 6eab2ddb2882..f889610f0e15 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -198,6 +198,7 @@ export { export { EuiSteps, + EuiStepsHorizontal, } from './steps'; export { diff --git a/src/components/steps/_index.scss b/src/components/steps/_index.scss index c64a8f5a5326..e9e5e6a84e49 100644 --- a/src/components/steps/_index.scss +++ b/src/components/steps/_index.scss @@ -1 +1,2 @@ @import 'steps'; +@import 'steps_horizontal'; diff --git a/src/components/steps/_steps_horizontal.scss b/src/components/steps/_steps_horizontal.scss new file mode 100644 index 000000000000..bfe303e2f5bb --- /dev/null +++ b/src/components/steps/_steps_horizontal.scss @@ -0,0 +1,3 @@ +.euiStepsHorizontal { + +} diff --git a/src/components/steps/index.js b/src/components/steps/index.js index c197c4f0b277..4dba467fa49a 100644 --- a/src/components/steps/index.js +++ b/src/components/steps/index.js @@ -1,3 +1,7 @@ export { EuiSteps, } from './steps'; + +export { + EuiStepsHorizontal, +} from './steps_horizontal'; diff --git a/src/components/steps/step_horizontal.js b/src/components/steps/step_horizontal.js new file mode 100644 index 000000000000..e6583c4ad093 --- /dev/null +++ b/src/components/steps/step_horizontal.js @@ -0,0 +1,46 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +export const EuiStepHorizontal = ({ + isSelected, + onClick, + children, + className, + disabled, + ...rest +}) => { + const classes = classNames('euiTab', className, { + 'EuiStepHorizontal-isSelected': isSelected, + 'EuiStepHorizontal-isDisabled': disabled, + }); + + return ( + + ); +}; + +EuiStepHorizontal.defaultProps = { + isSelected: false, + disabled: false, +}; + +EuiStepHorizontal.propTypes = { + isSelected: PropTypes.bool, + onClick: PropTypes.func.isRequired, + children: PropTypes.node, + className: PropTypes.string, + disabled: PropTypes.bool, +}; diff --git a/src/components/steps/steps_horizontal.js b/src/components/steps/steps_horizontal.js new file mode 100644 index 000000000000..fff8ed2addc6 --- /dev/null +++ b/src/components/steps/steps_horizontal.js @@ -0,0 +1,29 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +export const EuiStepsHorizontal = ({ + children, + className, + ...rest +}) => { + const classes = classNames( + 'euiStepsHorizontal', + className + ); + + return ( +
    + {children} +
    + ); +}; + +EuiStepsHorizontal.propTypes = { + children: PropTypes.node, + className: PropTypes.string, +}; diff --git a/src/components/steps/steps_horizontal.test.js b/src/components/steps/steps_horizontal.test.js new file mode 100644 index 000000000000..f2292693c014 --- /dev/null +++ b/src/components/steps/steps_horizontal.test.js @@ -0,0 +1,16 @@ +import React from 'react'; +import { render } from 'enzyme'; +import { requiredProps } from '../../test'; + +import { EuiStepsHorizontal } from './steps_horizontal'; + +describe('EuiStepsHorizontal', () => { + test('is rendered', () => { + const component = render( + + ); + + expect(component) + .toMatchSnapshot(); + }); +}); From 5198b72b530667383bb3d7b59962b9ae87d12cb5 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 7 Feb 2018 14:33:54 -0500 Subject: [PATCH 04/12] added snap --- .../steps/__snapshots__/steps_horizontal.test.js.snap | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 src/components/steps/__snapshots__/steps_horizontal.test.js.snap diff --git a/src/components/steps/__snapshots__/steps_horizontal.test.js.snap b/src/components/steps/__snapshots__/steps_horizontal.test.js.snap new file mode 100644 index 000000000000..fecffa251d06 --- /dev/null +++ b/src/components/steps/__snapshots__/steps_horizontal.test.js.snap @@ -0,0 +1,10 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EuiStepsHorizontal is rendered 1`] = ` +
    +`; From 0b6af09ff6d51a05837079eba87af82fb7ac34d4 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 7 Feb 2018 19:08:26 -0500 Subject: [PATCH 05/12] First pass at horizontal steps --- src-docs/src/views/steps/steps_horizontal.js | 93 ++++--------- .../steps_horizontal.test.js.snap | 131 +++++++++++++++++- src/components/steps/_index.scss | 17 +++ src/components/steps/_steps.scss | 16 +-- src/components/steps/_steps_horizontal.scss | 128 ++++++++++++++++- src/components/steps/step_horizontal.js | 71 +++++++--- src/components/steps/steps_horizontal.js | 42 +++++- src/components/steps/steps_horizontal.test.js | 20 ++- src/global_styling/mixins/_typography.scss | 8 +- 9 files changed, 419 insertions(+), 107 deletions(-) diff --git a/src-docs/src/views/steps/steps_horizontal.js b/src-docs/src/views/steps/steps_horizontal.js index 4f2b542e00dd..e0c899f0b393 100644 --- a/src-docs/src/views/steps/steps_horizontal.js +++ b/src-docs/src/views/steps/steps_horizontal.js @@ -1,72 +1,31 @@ import React from 'react'; import { - EuiTabs, - EuiTab, - EuiSpacer, + EuiStepsHorizontal, } from '../../../../src/components'; -class EuiHorizontalStepsExample extends React.Component { - constructor(props) { - super(props); - - this.tabs = [{ - id: 'cobalt', - name: 'Cobalt', - disabled: false, - }, { - id: 'dextrose', - name: 'Dextrose', - disabled: false, - }, { - id: 'hydrogen', - name: 'Hydrogen', - disabled: true, - }, { - id: 'monosodium_glutammate', - name: 'Monosodium Glutamate', - disabled: false, - }]; - - this.state = { - selectedTabId: 'cobalt', - }; - } - - onSelectedTabChanged = id => { - this.setState({ - selectedTabId: id, - }); - } - - renderTabs() { - return this.tabs.map((tab, index) => ( - this.onSelectedTabChanged(tab.id)} - isSelected={tab.id === this.state.selectedTabId} - disabled={tab.disabled} - key={index} - > - {tab.name} - - )); - } - - render() { - return ( -
    - - {this.renderTabs()} - - - - - - {this.renderTabs()} - -
    - ); - } -} - -export default EuiHorizontalStepsExample; +const horizontalSteps = [ + { + title: 'Completed Step 1', + isComplete: true, + }, + { + title: 'Selected Step 2', + isSelected: true, + }, + { + title: 'Incomplete Step 3', + }, + { + title: 'Disabled Step 4', + disabled: true, + }, +]; + +export default () => ( +
    + +
    +); diff --git a/src/components/steps/__snapshots__/steps_horizontal.test.js.snap b/src/components/steps/__snapshots__/steps_horizontal.test.js.snap index fecffa251d06..1b7691690008 100644 --- a/src/components/steps/__snapshots__/steps_horizontal.test.js.snap +++ b/src/components/steps/__snapshots__/steps_horizontal.test.js.snap @@ -6,5 +6,134 @@ exports[`EuiStepsHorizontal is rendered 1`] = ` class="euiStepsHorizontal testClass1 testClass2" data-test-subj="test subject string" role="tablist" -/> +> + + + + +
    `; diff --git a/src/components/steps/_index.scss b/src/components/steps/_index.scss index e9e5e6a84e49..111aaa87d4d2 100644 --- a/src/components/steps/_index.scss +++ b/src/components/steps/_index.scss @@ -1,2 +1,19 @@ +$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 'steps'; @import 'steps_horizontal'; diff --git a/src/components/steps/_steps.scss b/src/components/steps/_steps.scss index 65cc68f6289a..080937e59370 100644 --- a/src/components/steps/_steps.scss +++ b/src/components/steps/_steps.scss @@ -1,6 +1,3 @@ -$euiStepNumberSize: $euiSizeXL !default; -$euiStepNumberMargin: $euiSize !default; - /** * 1. Ensure that the step number vertically aligns with the title text */ @@ -18,18 +15,9 @@ $euiStepNumberMargin: $euiSize !default; .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; + @include createStepsNumber(); - color: $euiColorEmptyShade; - background-color: $euiColorPrimary; - - font-size: $euiFontSize; - font-weight: $euiFontWeightMedium; + margin-right: $euiStepNumberMargin; vertical-align: top; /* 1 */ } diff --git a/src/components/steps/_steps_horizontal.scss b/src/components/steps/_steps_horizontal.scss index bfe303e2f5bb..4353a83f0bca 100644 --- a/src/components/steps/_steps_horizontal.scss +++ b/src/components/steps/_steps_horizontal.scss @@ -1,3 +1,129 @@ -.euiStepsHorizontal { +@mixin makeLineProgress(){ + height: 2px; + background-color: $euiColorPrimary; +} + +/** + * 1. Ensure the title truncates instead of wraps + * 2. Ensure the connecting lines stays behind the number + */ + + .euiStepsHorizontal { + display: flex; + align-items: stretch; + flex-grow: 1; + background: rgba($euiColorLightestShade, .5); +} + +// Button containing item +.euiStepHorizontal { + flex-grow: 1; + flex-basis: 0%; + padding: $euiSizeL $euiSize $euiSize; + overflow: hidden; /* 1 */ + + // focus state + &:focus { + .euiStepHorizontal__number { + //box-shadow: 0 0 0 2px rgba($euiColorPrimary, .2); + animation: .3s $euiAnimSlightResistance 1 normal forwards focusRingAnimate; + } + + .euiStepHorizontal__title { + text-decoration: underline; + } + } + + // create the connecting lines + position: relative; + &::before, + &::after { + content: ""; + position: absolute; + width: 50%; + height: 1px; + top: $euiSizeL + $euiStepNumberSize/2; + background-color: $euiColorLightShade; + z-index: $euiZLevel0; /* 2 */ + } + + &::before { + left: 0; + } + + &::after { + right: 0; + } + + // Remove the respective lines if the first or last child + &:first-of-type::before { + display: none; + } + + &:last-of-type::after { + display: none; + } +} + +.euiStepHorizontal__number { + @include createStepsNumber; + position: relative; /* 2 */ + z-index: $euiZLevel1; /* 2 */ + + // if it contains an icon, it needs to shift up a couple px + > .euiIcon { + position: relative; + top: -2px; + } +} + +.euiStepHorizontal__title { + display: block; + @include euiTitle; + @include euiFontSize; + margin-top: $euiSizeS; + + // truncate + white-space: nowrap; /* 1 */ + overflow: hidden; /* 1 */ + text-overflow: ellipsis; /* 1 */ +} + +// Incomplete state +.euiStepHorizontal-isIncomplete { + .euiStepHorizontal__number { + background-color: $euiColorLightShade; + } + + .euiStepHorizontal__title { + color: $euiColorDarkShade; + } +} + +// Complete state +.euiStepHorizontal-isComplete { + &::before, + &::after { + @include makeLineProgress; + } +} + +// Selected state +.euiStepHorizontal-isSelected { + .euiStepHorizontal__number { + @include euiBottomShadowMedium; + } + + &::before { + @include makeLineProgress; + } +} +@keyframes focusRingAnimate { + 0% { + box-shadow: 0 0 0 10px rgba($euiColorPrimary, 0); + }, + 100% { + box-shadow: 0 0 0 2px rgba($euiColorPrimary, .2); + } } diff --git a/src/components/steps/step_horizontal.js b/src/components/steps/step_horizontal.js index e6583c4ad093..44be23db4ad4 100644 --- a/src/components/steps/step_horizontal.js +++ b/src/components/steps/step_horizontal.js @@ -2,45 +2,84 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; +import { + EuiScreenReaderOnly, +} from '../accessibility'; + +import { EuiIcon } from '../icon'; + export const EuiStepHorizontal = ({ - isSelected, - onClick, - children, className, + step, + title, + isSelected, + isComplete, disabled, ...rest }) => { - const classes = classNames('euiTab', className, { - 'EuiStepHorizontal-isSelected': isSelected, - 'EuiStepHorizontal-isDisabled': disabled, + const classes = classNames('euiStepHorizontal', className, { + 'euiStepHorizontal-isSelected': isSelected, + 'euiStepHorizontal-isComplete': isComplete, + 'euiStepHorizontal-isIncomplete': !isSelected && !isComplete, + 'euiStepHorizontal-isDisabled': disabled, }); + let numberNode; + let titleAppendix = ''; + + if (disabled) { + numberNode = ( + + ); + titleAppendix = ' is disabled'; + } else if (isComplete) { + numberNode = ( + + ); + titleAppendix = ' is complete'; + } else { + numberNode = step; + } + + const buttonTitle = `Step ${step}: ${title}${titleAppendix}`; + return ( ); }; -EuiStepHorizontal.defaultProps = { - isSelected: false, - disabled: false, -}; - EuiStepHorizontal.propTypes = { isSelected: PropTypes.bool, - onClick: PropTypes.func.isRequired, - children: PropTypes.node, + isComplete: PropTypes.bool, + onClick: PropTypes.func, + step: PropTypes.number.isRequired, + title: PropTypes.node, className: PropTypes.string, disabled: PropTypes.bool, }; + +EuiStepHorizontal.defaultProps = { + isSelected: false, + isComplete: false, + disabled: false, +}; diff --git a/src/components/steps/steps_horizontal.js b/src/components/steps/steps_horizontal.js index fff8ed2addc6..31f44bc4ebc2 100644 --- a/src/components/steps/steps_horizontal.js +++ b/src/components/steps/steps_horizontal.js @@ -1,10 +1,40 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; +import { + EuiStepHorizontal, +} from './step_horizontal'; + + +function renderHorizontalSteps(steps) { + return steps.map((step, index) => { + const { + children, + className, + disabled, + isSelected, + ...rest + } = step; + + return ( + + {children} + + ); + }); +} + export const EuiStepsHorizontal = ({ - children, className, + steps, ...rest }) => { const classes = classNames( @@ -18,12 +48,18 @@ export const EuiStepsHorizontal = ({ className={classes} {...rest} > - {children} + {renderHorizontalSteps(steps)} ); }; +const stepPropType = PropTypes.shape({ + isSelected: PropTypes.bool, + disabled: PropTypes.bool, + children: PropTypes.node +}); + EuiStepsHorizontal.propTypes = { - children: PropTypes.node, className: PropTypes.string, + steps: PropTypes.arrayOf(stepPropType).isRequired, }; diff --git a/src/components/steps/steps_horizontal.test.js b/src/components/steps/steps_horizontal.test.js index f2292693c014..1a3c542a3c32 100644 --- a/src/components/steps/steps_horizontal.test.js +++ b/src/components/steps/steps_horizontal.test.js @@ -4,10 +4,28 @@ import { requiredProps } from '../../test'; import { EuiStepsHorizontal } from './steps_horizontal'; +const steps = [ + { + title: 'Completed Step 1', + isComplete: true, + }, + { + title: 'Selected Step 2', + isSelected: true, + }, + { + title: 'Incomplete Step 3', + }, + { + title: 'Disabled Step 4', + disabled: true, + }, +]; + describe('EuiStepsHorizontal', () => { test('is rendered', () => { const component = render( - + ); expect(component) diff --git a/src/global_styling/mixins/_typography.scss b/src/global_styling/mixins/_typography.scss index 6837a3f0fe21..9c1b7a011382 100644 --- a/src/global_styling/mixins/_typography.scss +++ b/src/global_styling/mixins/_typography.scss @@ -37,13 +37,13 @@ line-height: $euiLineHeight; } -@mixin euiFontSizeM { - @include fontSize($euiFontSizeM); +@mixin euiFontSize { + @include fontSize($euiFontSize); line-height: $euiLineHeight; } -@mixin euiFontSize { - @include fontSize($euiFontSize); +@mixin euiFontSizeM { + @include fontSize($euiFontSizeM); line-height: $euiLineHeight; } From a373773dd1e8c2ae749693ff34cc00e31800b2f2 Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 8 Feb 2018 14:42:57 -0500 Subject: [PATCH 06/12] Hiding titles on small screens --- src/components/steps/_steps_horizontal.scss | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/src/components/steps/_steps_horizontal.scss b/src/components/steps/_steps_horizontal.scss index 4353a83f0bca..588d06024ce8 100644 --- a/src/components/steps/_steps_horizontal.scss +++ b/src/components/steps/_steps_horizontal.scss @@ -119,10 +119,28 @@ } } +// RESPONSIVE +@include screenXSmall { + .euiStepHorizontal { + // reduce top padding and shift lines + padding-top: $euiSize; + + &:before, + &:after { + top: $euiSize + $euiStepNumberSize/2; + } + } + + // hide titles + .euiStepHorizontal__title { + display: none; + } +} + @keyframes focusRingAnimate { 0% { box-shadow: 0 0 0 10px rgba($euiColorPrimary, 0); - }, + } 100% { box-shadow: 0 0 0 2px rgba($euiColorPrimary, .2); } From 38b12e61eac45c22aaaa57ab1d307ee5fcc539c8 Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 8 Feb 2018 15:02:03 -0500 Subject: [PATCH 07/12] Added option to allow click handlers --- src-docs/src/views/steps/steps_horizontal.js | 1 + src/components/steps/_steps_horizontal.scss | 5 +++++ src/components/steps/step_horizontal.js | 2 ++ src/components/steps/steps_horizontal.js | 2 ++ src/components/steps/steps_horizontal.test.js | 1 + 5 files changed, 11 insertions(+) diff --git a/src-docs/src/views/steps/steps_horizontal.js b/src-docs/src/views/steps/steps_horizontal.js index e0c899f0b393..fd1bd43690fb 100644 --- a/src-docs/src/views/steps/steps_horizontal.js +++ b/src-docs/src/views/steps/steps_horizontal.js @@ -8,6 +8,7 @@ const horizontalSteps = [ { title: 'Completed Step 1', isComplete: true, + onClick: () => window.alert('Step 1 clicked') }, { title: 'Selected Step 2', diff --git a/src/components/steps/_steps_horizontal.scss b/src/components/steps/_steps_horizontal.scss index 588d06024ce8..90bc54fa31aa 100644 --- a/src/components/steps/_steps_horizontal.scss +++ b/src/components/steps/_steps_horizontal.scss @@ -34,6 +34,11 @@ } } + // disabled state + &[disabled] { + cursor: not-allowed; + } + // create the connecting lines position: relative; &::before, diff --git a/src/components/steps/step_horizontal.js b/src/components/steps/step_horizontal.js index 44be23db4ad4..dfeecf051751 100644 --- a/src/components/steps/step_horizontal.js +++ b/src/components/steps/step_horizontal.js @@ -14,6 +14,7 @@ export const EuiStepHorizontal = ({ title, isSelected, isComplete, + onClick, disabled, ...rest }) => { @@ -49,6 +50,7 @@ export const EuiStepHorizontal = ({ aria-selected={!!isSelected} type="button" className={classes} + onClick={onClick} disabled={disabled} title={buttonTitle} {...rest} diff --git a/src/components/steps/steps_horizontal.js b/src/components/steps/steps_horizontal.js index 31f44bc4ebc2..fd9f9279e870 100644 --- a/src/components/steps/steps_horizontal.js +++ b/src/components/steps/steps_horizontal.js @@ -13,6 +13,7 @@ function renderHorizontalSteps(steps) { className, disabled, isSelected, + onClick, ...rest } = step; @@ -23,6 +24,7 @@ function renderHorizontalSteps(steps) { step={index + 1} disabled={disabled} isSelected={isSelected} + onClick={onClick} {...rest} > {children} diff --git a/src/components/steps/steps_horizontal.test.js b/src/components/steps/steps_horizontal.test.js index 1a3c542a3c32..bfae6aeee0a2 100644 --- a/src/components/steps/steps_horizontal.test.js +++ b/src/components/steps/steps_horizontal.test.js @@ -8,6 +8,7 @@ const steps = [ { title: 'Completed Step 1', isComplete: true, + onClick: () => window.alert('Step 1 clicked'), }, { title: 'Selected Step 2', From 970454861e98cbaa88665c7c4e43b2c4a6e98352 Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 8 Feb 2018 16:03:45 -0500 Subject: [PATCH 08/12] Created EuiSubSteps component to wrap sub steps in a class --- src-docs/src/views/steps/steps_complex.js | 13 +++++----- src-docs/src/views/steps/steps_example.js | 6 +++-- src/components/index.js | 1 + .../__snapshots__/sub_steps.test.js.snap | 9 +++++++ src/components/steps/_index.scss | 1 + src/components/steps/_steps.scss | 16 ------------ src/components/steps/_steps_horizontal.scss | 2 +- src/components/steps/_sub_steps.scss | 15 +++++++++++ src/components/steps/index.js | 4 +++ src/components/steps/sub_steps.js | 25 +++++++++++++++++++ src/components/steps/sub_steps.test.js | 16 ++++++++++++ 11 files changed, 83 insertions(+), 25 deletions(-) create mode 100644 src/components/steps/__snapshots__/sub_steps.test.js.snap create mode 100644 src/components/steps/_sub_steps.scss create mode 100644 src/components/steps/sub_steps.js create mode 100644 src/components/steps/sub_steps.test.js diff --git a/src-docs/src/views/steps/steps_complex.js b/src-docs/src/views/steps/steps_complex.js index a6cbcff04ae9..1857745457fa 100644 --- a/src-docs/src/views/steps/steps_complex.js +++ b/src-docs/src/views/steps/steps_complex.js @@ -5,6 +5,7 @@ import { EuiSteps, EuiText, EuiCodeBlock, + EuiSubSteps, } from '../../../../src/components'; const steps = [ @@ -24,13 +25,13 @@ const steps = [ children: (

    In order to complete this step, do the following things in order.

    -
    +
    1. Do thing 1
    2. Do thing 2
    3. Do thing 3
    -
    +

    Here are some bullet point reminders.

    • Reminder 1
      • @@ -57,21 +58,21 @@ const steps = [ children: (

      Option 1: If you have this type of instance

      -
      +
      1. Do thing 1
      2. Do thing 2
      3. Do thing 3
      -
      +

      Option 2: If you have the other type of instance

      -
      +
      1. Do thing 1
      2. Do thing 2
      3. Do thing 3
      -
      +       ) }, diff --git a/src-docs/src/views/steps/steps_example.js b/src-docs/src/views/steps/steps_example.js index 0af093d146ae..03c7f3605e75 100644 --- a/src-docs/src/views/steps/steps_example.js +++ b/src-docs/src/views/steps/steps_example.js @@ -57,7 +57,9 @@ export const StepsExample = { }], text: (

      - Here's how to handle complex content within steps. + If you need to call out a set of substeps that are not lines of code, + most likely a <ol/>, wrap + the block in a <EuiSubSteps/>.

      ), demo: , @@ -96,7 +98,7 @@ export const StepsExample = { code: stepsHorizontalHtml, }], text: ( -

      Description needed: how to use the StepsHorizontal component.

      +

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

      ), demo: }], diff --git a/src/components/index.js b/src/components/index.js index f889610f0e15..8416e1d83996 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -198,6 +198,7 @@ export { export { EuiSteps, + EuiSubSteps, EuiStepsHorizontal, } from './steps'; diff --git a/src/components/steps/__snapshots__/sub_steps.test.js.snap b/src/components/steps/__snapshots__/sub_steps.test.js.snap new file mode 100644 index 000000000000..350d3eac7869 --- /dev/null +++ b/src/components/steps/__snapshots__/sub_steps.test.js.snap @@ -0,0 +1,9 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EuiSubSteps is rendered 1`] = ` +
      +`; diff --git a/src/components/steps/_index.scss b/src/components/steps/_index.scss index 111aaa87d4d2..a30bd442990f 100644 --- a/src/components/steps/_index.scss +++ b/src/components/steps/_index.scss @@ -16,4 +16,5 @@ $euiStepNumberMargin: $euiSize !default; } @import 'steps'; +@import 'sub_steps'; @import 'steps_horizontal'; diff --git a/src/components/steps/_steps.scss b/src/components/steps/_steps.scss index 080937e59370..51507fc812da 100644 --- a/src/components/steps/_steps.scss +++ b/src/components/steps/_steps.scss @@ -33,20 +33,4 @@ margin-left: ($euiStepNumberSize/2) - 1px; } - // add shading to callout substeps within the content - .euiStep__subSteps { - padding: $euiSize; - background-color: tint($euiColorPrimary, 93%); - margin-bottom: $euiSize; - - > *:last-child { - margin-bottom: 0; - } - - // change ordered list from numbers to lowercase letters - .euiText & ol { - list-style-type: lower-alpha; - } - } - diff --git a/src/components/steps/_steps_horizontal.scss b/src/components/steps/_steps_horizontal.scss index 90bc54fa31aa..cad5e10d74d7 100644 --- a/src/components/steps/_steps_horizontal.scss +++ b/src/components/steps/_steps_horizontal.scss @@ -26,7 +26,7 @@ &:focus { .euiStepHorizontal__number { //box-shadow: 0 0 0 2px rgba($euiColorPrimary, .2); - animation: .3s $euiAnimSlightResistance 1 normal forwards focusRingAnimate; + animation: $euiAnimSpeedSlow $euiAnimSlightResistance 1 normal forwards focusRingAnimate; } .euiStepHorizontal__title { diff --git a/src/components/steps/_sub_steps.scss b/src/components/steps/_sub_steps.scss new file mode 100644 index 000000000000..7feec9bb699c --- /dev/null +++ b/src/components/steps/_sub_steps.scss @@ -0,0 +1,15 @@ +.euiSubSteps { + padding: $euiSize; + background-color: tint($euiColorPrimary, 93%); + margin-bottom: $euiSize; + + > *:last-child { + margin-bottom: 0; + } + + // change ordered list from numbers to lowercase letters + .euiText & ol, + & ol { + list-style-type: lower-alpha; + } +} diff --git a/src/components/steps/index.js b/src/components/steps/index.js index 4dba467fa49a..2ec2fba1f9af 100644 --- a/src/components/steps/index.js +++ b/src/components/steps/index.js @@ -2,6 +2,10 @@ export { EuiSteps, } from './steps'; +export { + EuiSubSteps, +} from './sub_steps'; + export { EuiStepsHorizontal, } from './steps_horizontal'; diff --git a/src/components/steps/sub_steps.js b/src/components/steps/sub_steps.js new file mode 100644 index 000000000000..e44c5fb97c65 --- /dev/null +++ b/src/components/steps/sub_steps.js @@ -0,0 +1,25 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +export const EuiSubSteps = ({ + children, + className, + ...rest, +}) => { + const classes = classNames('euiSubSteps', className); + + return ( +
      + {children} +
      + ); +}; + +EuiSubSteps.propTypes = { + children: PropTypes.node, + className: PropTypes.string, +}; diff --git a/src/components/steps/sub_steps.test.js b/src/components/steps/sub_steps.test.js new file mode 100644 index 000000000000..2ff3dedbb5e4 --- /dev/null +++ b/src/components/steps/sub_steps.test.js @@ -0,0 +1,16 @@ +import React from 'react'; +import { render } from 'enzyme'; +import { requiredProps } from '../../test'; + +import { EuiSubSteps } from './sub_steps'; + +describe('EuiSubSteps', () => { + test('is rendered', () => { + const component = render( + + ); + + expect(component) + .toMatchSnapshot(); + }); +}); From 6895695f548265b412cd9c0b1151190baac4e703 Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 8 Feb 2018 16:07:07 -0500 Subject: [PATCH 09/12] changelog --- CHANGELOG.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7562e40df762..57f4081d559b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ # [`master`](https://github.com/elastic/eui/tree/master) -- No public interface changes since `0.0.20`. +- Added component to wrap blocks of substeps `EuiSubSteps` in a shaded container. ([#375](https://github.com/elastic/eui/pull/375)) +- Added horizontal steps component ([#375](https://github.com/elastic/eui/pull/375)) # [`0.0.20`](https://github.com/elastic/eui/tree/v0.0.20) From 816d1ccd20d04a28c7c3ecb08388899bd1a82a02 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Thu, 8 Feb 2018 15:52:18 -0800 Subject: [PATCH 10/12] minor touchup to horiz steps --- .../steps_horizontal.test.js.snap | 2 +- src/components/steps/_steps_horizontal.scss | 32 +++++++++++++++++-- src/components/steps/step_horizontal.js | 2 +- 3 files changed, 32 insertions(+), 4 deletions(-) diff --git a/src/components/steps/__snapshots__/steps_horizontal.test.js.snap b/src/components/steps/__snapshots__/steps_horizontal.test.js.snap index 1b7691690008..3ea66b90d94f 100644 --- a/src/components/steps/__snapshots__/steps_horizontal.test.js.snap +++ b/src/components/steps/__snapshots__/steps_horizontal.test.js.snap @@ -110,7 +110,7 @@ exports[`EuiStepsHorizontal is rendered 1`] = ` class="euiStepHorizontal__number" > .euiIcon { @@ -82,6 +96,11 @@ } } + +.euiStepHorizontal__disabledIcon { + fill: $euiColorDarkShade; +} + .euiStepHorizontal__title { display: block; @include euiTitle; @@ -98,11 +117,20 @@ .euiStepHorizontal-isIncomplete { .euiStepHorizontal__number { background-color: $euiColorLightShade; + color: $euiColorDarkShade; } .euiStepHorizontal__title { color: $euiColorDarkShade; } + + &:hover:not(:disabled) { + + .euiStepHorizontal__number { + background-color: $euiColorPrimary; + color: $euiColorEmptyShade; + } + } } // Complete state @@ -147,6 +175,6 @@ box-shadow: 0 0 0 10px rgba($euiColorPrimary, 0); } 100% { - box-shadow: 0 0 0 2px rgba($euiColorPrimary, .2); + box-shadow: 0 0 0 4px rgba($euiColorPrimary, .2); } } diff --git a/src/components/steps/step_horizontal.js b/src/components/steps/step_horizontal.js index dfeecf051751..5c1c75ebd907 100644 --- a/src/components/steps/step_horizontal.js +++ b/src/components/steps/step_horizontal.js @@ -30,7 +30,7 @@ export const EuiStepHorizontal = ({ if (disabled) { numberNode = ( - + ); titleAppendix = ' is disabled'; } else if (isComplete) { From 3f2807996faeaf8ab583126cd150e6a2d2c14130 Mon Sep 17 00:00:00 2001 From: cchaos Date: Fri, 9 Feb 2018 12:17:06 -0500 Subject: [PATCH 11/12] =?UTF-8?q?Moved=20focus=20ring=20stuff=20to=20it?= =?UTF-8?q?=E2=80=99s=20own=20global=20file=20for=20re-use?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit And removed locked icon from disabled state --- .../steps_horizontal.test.js.snap | 20 +------ src/components/steps/_steps_horizontal.scss | 52 ++++--------------- src/components/steps/step_horizontal.js | 4 +- src/global_styling/mixins/_index.scss | 1 + src/global_styling/mixins/_states.scss | 33 ++++++++++++ 5 files changed, 46 insertions(+), 64 deletions(-) create mode 100644 src/global_styling/mixins/_states.scss diff --git a/src/components/steps/__snapshots__/steps_horizontal.test.js.snap b/src/components/steps/__snapshots__/steps_horizontal.test.js.snap index 3ea66b90d94f..6800cdfa80c2 100644 --- a/src/components/steps/__snapshots__/steps_horizontal.test.js.snap +++ b/src/components/steps/__snapshots__/steps_horizontal.test.js.snap @@ -109,25 +109,7 @@ exports[`EuiStepsHorizontal is rendered 1`] = `
      - - - - - - + 4
      .euiIcon { @@ -96,11 +86,6 @@ } } - -.euiStepHorizontal__disabledIcon { - fill: $euiColorDarkShade; -} - .euiStepHorizontal__title { display: block; @include euiTitle; @@ -111,6 +96,10 @@ white-space: nowrap; /* 1 */ overflow: hidden; /* 1 */ text-overflow: ellipsis; /* 1 */ + + .euiStepHorizontal:disabled & { + color: $euiColorDarkShade; + } } // Incomplete state @@ -119,18 +108,6 @@ background-color: $euiColorLightShade; color: $euiColorDarkShade; } - - .euiStepHorizontal__title { - color: $euiColorDarkShade; - } - - &:hover:not(:disabled) { - - .euiStepHorizontal__number { - background-color: $euiColorPrimary; - color: $euiColorEmptyShade; - } - } } // Complete state @@ -169,12 +146,3 @@ display: none; } } - -@keyframes focusRingAnimate { - 0% { - box-shadow: 0 0 0 10px rgba($euiColorPrimary, 0); - } - 100% { - box-shadow: 0 0 0 4px rgba($euiColorPrimary, .2); - } -} diff --git a/src/components/steps/step_horizontal.js b/src/components/steps/step_horizontal.js index 5c1c75ebd907..368cfaff34fe 100644 --- a/src/components/steps/step_horizontal.js +++ b/src/components/steps/step_horizontal.js @@ -29,9 +29,7 @@ export const EuiStepHorizontal = ({ let titleAppendix = ''; if (disabled) { - numberNode = ( - - ); + numberNode = step; titleAppendix = ' is disabled'; } else if (isComplete) { numberNode = ( diff --git a/src/global_styling/mixins/_index.scss b/src/global_styling/mixins/_index.scss index 169cfa6d37e3..27e634e1c934 100644 --- a/src/global_styling/mixins/_index.scss +++ b/src/global_styling/mixins/_index.scss @@ -4,3 +4,4 @@ @import 'size'; @import 'typography'; @import 'helpers'; +@import 'states'; diff --git a/src/global_styling/mixins/_states.scss b/src/global_styling/mixins/_states.scss new file mode 100644 index 000000000000..8dbe2855f5cf --- /dev/null +++ b/src/global_styling/mixins/_states.scss @@ -0,0 +1,33 @@ +// Colors +$euiFocusRingColor: rgba($euiColorPrimary, .2); +$euiFocusRingAnimStartColor: rgba($euiColorPrimary, 0); + +// Sizing +$euiFocusRingSize: 2px; +$euiFocusRingSizeLarge: 4px; + +@mixin euiFocusRing($size) { + @if $size = "large" { + animation: $euiAnimSpeedSlow $euiAnimSlightResistance 1 normal forwards focusRingAnimateLarge; + } @else { + animation: $euiAnimSpeedSlow $euiAnimSlightResistance 1 normal forwards focusRingAnimate; + } +} + +@keyframes focusRingAnimate { + 0% { + box-shadow: 0 0 0 6px $euiFocusRingAnimStartColor; + } + 100% { + box-shadow: 0 0 0 $euiFocusRingSize $euiFocusRingColor; + } +} + +@keyframes focusRingAnimateLarge { + 0% { + box-shadow: 0 0 0 10px $euiFocusRingAnimStartColor; + } + 100% { + box-shadow: 0 0 0 $euiFocusRingSizeLarge $euiFocusRingColor; + } +} From a7b5079e5dfc7bf035ce9c04ffa41e8ffd3b7343 Mon Sep 17 00:00:00 2001 From: cchaos Date: Fri, 9 Feb 2018 13:09:44 -0500 Subject: [PATCH 12/12] space issue --- src/components/steps/_steps_horizontal.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/steps/_steps_horizontal.scss b/src/components/steps/_steps_horizontal.scss index 716f3d0d6d4a..eafbe7274c7b 100644 --- a/src/components/steps/_steps_horizontal.scss +++ b/src/components/steps/_steps_horizontal.scss @@ -8,7 +8,7 @@ * 2. Ensure the connecting lines stays behind the number */ - .euiStepsHorizontal { +.euiStepsHorizontal { display: flex; align-items: stretch; flex-grow: 1;