-
Notifications
You must be signed in to change notification settings - Fork 1.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(docs): add POC for use-cases - accordion example
- Loading branch information
ludmilanesvitiy
committed
Oct 10, 2018
1 parent
e225d8d
commit 353d842
Showing
8 changed files
with
557 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
01: Accordion basic example | ||
=========================== | ||
**Primary Actor**: User | ||
|
||
**Scope**: Ngx-bootstrap DEMO / BS version 4/ v.3.0.1 | ||
|
||
**Goal**: Show user basic accordion functionality | ||
|
||
Main success scenario: | ||
---------------------- | ||
1. User open Accordion demo page | ||
2. User click on Basic sub-menu | ||
3. User able to click on each item of 4 | ||
4. After click on each item, user see any content inside | ||
|
||
Extensions: | ||
----------- | ||
4a. If the item is opened, after click, it should be closed | ||
|
||
Variations: | ||
----------- | ||
2'. User scroll to Basic sub-menu | ||
|
||
Schema: | ||
------- | ||
<img src="svg/mermaid-basic-usecase.svg" alt="mermaid basic usecase" width="400"/> | ||
|
||
|
||
Mermaid configuration: | ||
---------------------- | ||
```mermaid | ||
graph TD | ||
A[User open Accordion demo page] -->|User click on Basic sub-menu| B{User able to click on each item of 4} | ||
A[User open Accordion demo page] -->|User scroll to Basic sub-menu| B{User able to click on each item of 4} | ||
B -->C[Click on each item] | ||
C --> |Opened?| D[Closed] | ||
C --> |Closed?| E[Opened] |
26 changes: 26 additions & 0 deletions
26
docs/spec/accordion/accordion.examples.custom-html.use-case.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
03: Accordion Custom HTML | ||
========================= | ||
**Primary Actor**: User | ||
|
||
**Scope**: Ngx-bootstrap DEMO / BS version 4/ v.3.0.1 | ||
|
||
**Goal**: Show example of accordion items with custom html inside | ||
|
||
Main success scenario: | ||
---------------------- | ||
1. User open Accordion demo page | ||
2. User click on Custom HTML sub-menu | ||
3. User able to click on each item of 2 | ||
4. First item have additional span block with "Some HTML here" text | ||
5. After click on the first item, it is opened | ||
6. Second item don't have any additional html with closed state | ||
7. After click on the second item, it is opened and there is a span block with text "And some HTML here" | ||
|
||
Extensions: | ||
----------- | ||
5a. If item is opened, after click on item it is closed | ||
|
||
|
||
Variations: | ||
----------- | ||
2'. User scroll to Custom HTML sub-menu |
21 changes: 21 additions & 0 deletions
21
docs/spec/accordion/accordion.examples.disabled.use-case.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
04: Accordion disabled panels example | ||
===================================== | ||
**Primary Actor**: User | ||
|
||
**Scope**: Ngx-bootstrap DEMO / BS version 4/ v.3.0.1 | ||
|
||
**Goal**: Show how to disable/enable accordion items | ||
|
||
Main success scenario: | ||
---------------------- | ||
1. User open Accordion demo page | ||
2. User click on Disabled sub-menu | ||
3. User able to click on each item of 3 | ||
4. When user click on "Enable/Disable first panel" button then the first item is not clickable | ||
5. When user click on "Enable/Disable first panel" second time and click on first item, then item opened and user see content | ||
6. When user click on "Enable/Disable first panel" third time then the first item is not clickable again | ||
|
||
|
||
Variations: | ||
----------- | ||
2'. User scroll to Disabled sub-menu |
28 changes: 28 additions & 0 deletions
28
docs/spec/accordion/accordion.examples.group-open.use-case.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
02: Accordion group opening event example | ||
========================================= | ||
**Primary Actor**: User | ||
|
||
**Scope**: Ngx-bootstrap DEMO / BS version 4/ v.3.0.1 | ||
|
||
**Goal**: Show example of event listener, which listen all actions with accordion items | ||
|
||
Main success scenario: | ||
---------------------- | ||
1. User open Accordion demo page | ||
2. User click on Group opening event sub-menu | ||
3. User able to click on each item of 3 | ||
4. After click on item without event listener, item is opened and in the browser console - nothing happens | ||
5. After click on item with event listener, item is opened and in the browser console - should be message "Accordion has been opened" | ||
|
||
|
||
Extensions: | ||
----------- | ||
4a. If item is opened, after click on item without event listener, item is closed and in the browser console - nothing happens | ||
5a. If item is opened, after click on item with event listener, item is closed and in the browser console - should be message "Accordion has been closed" | ||
|
||
|
||
Variations: | ||
----------- | ||
2'. User scroll to Group opening event sub-menu | ||
|
||
|
21 changes: 21 additions & 0 deletions
21
docs/spec/accordion/accordion.examples.initially-opened.use-case.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
05: Accordion Initially opened example | ||
====================================== | ||
**Primary Actor**: User | ||
|
||
**Scope**: Ngx-bootstrap DEMO / BS version 4/ v.3.0.1 | ||
|
||
**Goal**: Show user initially opened items example in accordion functionality | ||
|
||
Main success scenario: | ||
---------------------- | ||
1. User open Accordion demo page | ||
2. User click on Initially opened sub-menu | ||
3. User able to click on each item of 3 | ||
4. Item with name "Initially expanded" should be opened by default and content inside should be visible | ||
5. When user click on this item, it should be closed | ||
6. When user reload page, then initially expanded item should be opened again | ||
|
||
|
||
Variations: | ||
----------- | ||
2'. User scroll to Initially opened sub-menu |
Oops, something went wrong.