feat(docs): add use-cases for accordion component (valor-software#4677)

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

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

docs/spec/accordion/accordion.examples.conf-defaults.use-case.md

@@ -0,0 +1,24 @@
+0.11: Accordion Configuring defaults example
+============================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user example with configuring default values in accordion
+
+Main success scenario:
+----------------------
+1. User open Accordion demo page
+2. User click on Configuring defaults sub-menu
+3. User able to click on each item of 3
+4. Src of component show how to override AccordionConfig
+5. When user click on the one item, then content is shown
+6. When user click on the other item, it's one is opened and previous one is closed
+
+Extensions:
+-----------
+6a. If component overrides with closeOthers: true parameter
+
+Variations:
+-----------
+2*. User scroll to Configuring defaults sub-menu

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

@@ -0,0 +1,25 @@
+0.3: Accordion Custom HTML
+==========================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**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,20 @@
+0.4: Accordion disabled panels example
+======================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**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.dynamic-body.use-case.md

@@ -0,0 +1,23 @@
+0.7: Accordion dynamic body example
+===================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user possibilities to dynamic adding content to the body
+
+Main success scenario:
+----------------------
+1. User open Accordion demo page
+2. User click on Dynamic body content sub-menu
+3. User able to click on each item of 3
+4. The first item with name "Dynamic Body Content"
+5. When user click on "Dynamic Body Content" item, then user see "Add Item" button and could click on it
+6. There is 3 div-blocks inside the first item
+7. After click on "Add Item" button, amount of div-blocks inside should be increased to 4
+8. After click on "Add Item" button again, amount of div-blocks inside should be increased to 5
+9. After reloading page, amount of items should back to default (3 items and 3 div-blocks inside first item)
+
+Variations:
+-----------
+2*. User scroll to Dynamic body content sub-menu

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

@@ -0,0 +1,20 @@
+0.6: Accordion dynamic example
+==============================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user possibilities to dynamic adding new items
+
+Main success scenario:
+----------------------
+1. User open Accordion demo page
+2. User click on Dynamic accordion sub-menu
+3. User able to click on each item of 2
+4. When user click on "Add Group Item" button then new item added
+5. User able to click on just added new item and see the content inside
+6. After reloading page, amount of items in Accordion dynamic block should be 2
+
+Variations:
+-----------
+2*. User scroll to Dynamic accordion sub-menu

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

@@ -0,0 +1,24 @@
+0.2: Accordion group opening event example
+==========================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**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,20 @@
+0.5: Accordion Initially opened example
+=======================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**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

docs/spec/accordion/accordion.examples.manual-toggle.use-case.md

@@ -0,0 +1,19 @@
+0.8: Accordion Manual toggle example
+====================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user possibilities to toggle accordion items manually
+
+Main success scenario:
+----------------------
+1. User open Accordion demo page
+2. User click on Manual toggle sub-menu
+3. User able to click on each item of 3
+4. When user click on "Toggle last panel" button, then last item opened and user see content inside
+5. When user click on "Toggle last panel" button second time, then last item closed
+
+Variations:
+-----------
+2*. User scroll to Manual toggle sub-menu

docs/spec/accordion/accordion.examples.only-one.use-case.md

@@ -0,0 +1,23 @@
+0.9: Accordion Open only one at a time example
+==============================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user on a time accordion functionality (open only 1 item at a time)
+
+Main success scenario:
+----------------------
+1. User open Accordion demo page
+2. User click on Open only one at a time sub-menu
+3. User able to click on each item of 3
+4. User see checked check-box "Open only one at a time" by default
+5. When user click on 1st item, it opened
+6. When user click on 2d item, it opened and 1st is closed
+7. When user click on 3d item, it opened and 2d is closed
+8. When user uncheck the check-box "Open only one at a time"
+9. Then after click on each item, it stay opened.
+
+Variations:
+-----------
+2*. User scroll to Open only one at a time sub-menu

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

@@ -0,0 +1,20 @@
+0.10: Accordion Styling example
+===============================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user how to use different styles for each accordion item
+
+Main success scenario:
+----------------------
+1. User open Accordion demo page
+2. User click on Styling sub-menu
+3. User able to click on each item of 3, first item is opened by default
+4. Styles for the 1st and 3d items should be the same (from the customClass styles)
+5. Styles for the content inside 1st and 3d items should be the same (from the customClass styles)
+6. Styles for the 2d item and content should be default
+
+Variations:
+-----------
+2*. User scroll to Styling sub-menu