From 949049a8b284beb8d5d9fdeab90f4554cdbee648 Mon Sep 17 00:00:00 2001 From: GerardoPM Date: Wed, 6 Apr 2022 17:29:23 -0500 Subject: [PATCH] steps-docs --- .../core/addon/components/eui-steps/index.hbs | 8 +- .../core/docs/navigation/steps-demo/demo1.md | 34 ++++---- .../core/docs/navigation/steps-demo/demo2.md | 39 ++++----- .../core/docs/navigation/steps-demo/demo3.md | 22 ++--- .../core/docs/navigation/steps-demo/demo4.md | 84 +++++++++++++++++++ .../core/docs/navigation/steps-demo/demo5.md | 29 +++++++ 6 files changed, 166 insertions(+), 50 deletions(-) create mode 100644 packages/core/docs/navigation/steps-demo/demo4.md create mode 100644 packages/core/docs/navigation/steps-demo/demo5.md diff --git a/packages/core/addon/components/eui-steps/index.hbs b/packages/core/addon/components/eui-steps/index.hbs index 35258ffc9..d7cbb0e16 100644 --- a/packages/core/addon/components/eui-steps/index.hbs +++ b/packages/core/addon/components/eui-steps/index.hbs @@ -1,3 +1,9 @@ -
+
{{yield}}
\ No newline at end of file diff --git a/packages/core/docs/navigation/steps-demo/demo1.md b/packages/core/docs/navigation/steps-demo/demo1.md index ce6441860..d1c1d78fd 100644 --- a/packages/core/docs/navigation/steps-demo/demo1.md +++ b/packages/core/docs/navigation/steps-demo/demo1.md @@ -2,28 +2,26 @@ order: 1 --- -# Basic Steps + +

EuiSteps presents procedural content in a numbered outline format. It is best used when presenting instructional content that must be conducted in a particular order. It requires a title and children to be present and will automatically increment the step number based on the initial firstStepNumber.

+ ```hbs template - - You do this! + + Do this first - - You do that! - - - You did what!? + + Then this + + +

+ Set + firstStepNumber + to continue step numbering after any type of break in the content +

+ + ``` diff --git a/packages/core/docs/navigation/steps-demo/demo2.md b/packages/core/docs/navigation/steps-demo/demo2.md index be459ad70..85f6e047b 100644 --- a/packages/core/docs/navigation/steps-demo/demo2.md +++ b/packages/core/docs/navigation/steps-demo/demo2.md @@ -1,63 +1,60 @@ --- -order: 2 +order: 4 --- # Statuses + +

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

+ + ```hbs template - + You do this! - - You did good! {{if (eq this.status "danger") "(or not)"}} - - Click the buttons below to change status! + + We are fancy buttons just waiting to be pushed! +
+ - + Set Danger - + Set Complete - + Set Warning - + Set Loading - + Set Disabled - + Set Incomplete - + Reset - +
``` diff --git a/packages/core/docs/navigation/steps-demo/demo3.md b/packages/core/docs/navigation/steps-demo/demo3.md index 29214f0b7..fa0883c1a 100644 --- a/packages/core/docs/navigation/steps-demo/demo3.md +++ b/packages/core/docs/navigation/steps-demo/demo3.md @@ -1,28 +1,30 @@ --- -order: 3 +order: 5 --- # Horizontal Steps + +

For use when forms/setup instructions can and should be split into multiple pages. Each step should correspond to an individual page of form elements, using the status key to denote the user's progress.

+

For horizontal steps, the status key defaults to "incomplete" and the default filled styling is reserved for indicating "current" status.

+ + ```hbs template + - diff --git a/packages/core/docs/navigation/steps-demo/demo4.md b/packages/core/docs/navigation/steps-demo/demo4.md new file mode 100644 index 000000000..46934bb0c --- /dev/null +++ b/packages/core/docs/navigation/steps-demo/demo4.md @@ -0,0 +1,84 @@ +--- +order: 2 +--- + +# Complex 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/>.

+ + +```hbs template + + + +

Run this code snippet to install things.

+ + + npm install + + + +

+ 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.

+
    +
  • Reminder 1
    • +
  • Reminder 2
    • +
  • Reminder 3
    • +
+ + + + +

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

+

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

+ + + + +

+ 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. +
+ + + + +``` diff --git a/packages/core/docs/navigation/steps-demo/demo5.md b/packages/core/docs/navigation/steps-demo/demo5.md new file mode 100644 index 000000000..d5d7d18c0 --- /dev/null +++ b/packages/core/docs/navigation/steps-demo/demo5.md @@ -0,0 +1,29 @@ +--- +order: 3 +--- + +# Heading elements + + +

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 h2and therefore adds headingElement="h2" to the EuiSteps component.

+

The style of the title will not be affected.

+ + +```hbs template +
+ +

Heading 1

+ + + + + + + +

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

+ + + + +
+```