feat(docs): add POC for use-cases - accordion example

docs/spec/accordion/accordion.examples.basic.use-case.md

@@ -0,0 +1,37 @@
+01: Accordion basic example
+===========================
+**Primary Actor**: User  //TODO ?
+
+**Scope**: Ngx-bootstrap DEMO //TODO ? / BS version(3/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
+
+Schemma:
+--------
+<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]

docs/spec/accordion/accordion.examples.custom-html.use-case.md

@@ -0,0 +1,26 @@
+03: Accordion Custom HTML
+=========================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO
+
+**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

docs/spec/accordion/accordion.examples.disabled.use-case.md

@@ -0,0 +1,21 @@
+04: Accordion disabled panels example
+=====================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO
+
+**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

docs/spec/accordion/accordion.examples.group-open.use-case.md

@@ -0,0 +1,28 @@
+02: Accordion group opening event example
+=========================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO
+
+**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
+
+

docs/spec/accordion/accordion.examples.initially-opened.use-case.md

@@ -0,0 +1,21 @@
+05: Accordion Initially opened example
+======================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO
+
+**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