feat(docs): add use-cases for dropdowns component (#4733)

docs/spec/dropdowns/dropdowns.examples.accessibility.use-case.md

@@ -0,0 +1,14 @@
+6.18: Dropdowns Accessibility example
+=====================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user information about dropdown accessibility
+
+Main success scenario:
+----------------------
+1. User opens Dropdowns demo page
+2. User clicks on Accessibility sub-menu
+3. User see info about role="menu" widget and role and aria- attributes
+

docs/spec/dropdowns/dropdowns.examples.append-to-body.use-case.md

@@ -0,0 +1,20 @@
+6.10: Dropdowns Append to body example
+======================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user example how to append dropdown to body
+
+Main success scenario:
+----------------------
+1. User opens Dropdowns demo page
+2. User clicks on Append to body sub-menu
+3. User see clickable button "Dropdown on Body"
+4. When user clicks on this button, then dropdown opened and there are 4 items, one of them is separated
+5. When user clicks on any item, then dropdown closes
+6. Template src should be implemented with dropdown container="body"
+
+Variations:
+-----------
+2*. User scroll to Append to body sub-menu

docs/spec/dropdowns/dropdowns.examples.auto-close.use-case.md

@@ -0,0 +1,25 @@
+6.17: Dropdowns Auto close example
+==================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user example how to use autoClose property for dropdown behaviour
+
+Main success scenario:
+----------------------
+1. User opens Dropdowns demo page
+2. User clicks on Auto close sub-menu
+3. User see 2 clickable buttons "Button dropdown"
+4. When user clicks on the first "Button dropdown", then dropdown opened and there are 3 items inside
+5. When user press "ESC", then this dropdown closes
+6. When user clicks on the first "Button dropdown" again, then dropdown opened and there are 3 items inside
+7. When user clicks outside dropdown, then this dropdown closes
+8. When user clicks on the second "Button dropdown", then dropdown opened and there are 3 items inside
+9. When user press "ESC", nothing happens
+10. When user clicks outside dropdown, nothing happens
+11. When user clicks on the second "Button dropdown" again, then dropdown closed
+
+Variations:
+-----------
+2*. User scroll to Auto close sub-menu

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

@@ -0,0 +1,19 @@
+6.1: Dropdowns basic example
+============================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user basic dropdowns functionality
+
+Main success scenario:
+----------------------
+1. User opens Dropdowns demo page
+2. User clicks on Basic sub-menu
+3. User see "Button dropdown" and able to click on it
+4. When user clicks on "Button dropdown", then dropdown opened and there are 4 items, 1 of them is separated
+5. When user clicks on any item, then dropdown closes
+
+Variations:
+-----------
+2*. User scroll to Basic sub-menu

docs/spec/dropdowns/dropdowns.examples.config-defaults.use-case.md

@@ -0,0 +1,21 @@
+6.14: Dropdowns Configuring defaults example
+============================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user example how to override default dropdown parameters
+
+Main success scenario:
+----------------------
+1. User opens Dropdowns demo page
+2. User clicks on Configuring defaults sub-menu
+3. User see clickable button "Button dropdown"
+4. When user clicks on "Button dropdown", then dropdown opened and there are 3 items
+5. When user clicks on any item, nothing happens.
+6. When user click on button "Button dropdown" again, then dropdown closes
+7. Component src should be written with BsDropdownConfig as a provider and autoClose: false as a value object
+
+Variations:
+-----------
+2*. User scroll to Configuring defaults sub-menu

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

@@ -0,0 +1,19 @@
+6.13: Dropdowns Custom html example
+============================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user example how to add custom html to the dropdown items
+
+Main success scenario:
+----------------------
+1. User opens Dropdowns demo page
+2. User clicks on Custom html sub-menu
+3. User see clickable button "Button dropdown"
+4. When user clicks on this button, then dropdown opened and there are 3 items
+5. Latest item in dropdown should have specific class
+
+Variations:
+-----------
+2*. User scroll to Custom html sub-menu

docs/spec/dropdowns/dropdowns.examples.disabled-menu.use-case.md

@@ -0,0 +1,23 @@
+6.6: Dropdowns Disabled menu example
+====================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user example how to use isDisabled property in dropdown
+
+Main success scenario:
+----------------------
+1. User opens Dropdowns demo page
+2. User clicks on Disabled menu sub-menu
+3. User see 2 clickable buttons "Button dropdown" and "Enable/Disable"
+4. When user clicks on "Button dropdown", then dropdown opened and there are 4 items, 1 of them is separated
+5. When user clicks on any item, dropdown closes
+6. When user clicks on "Enable/Disable", then "Button dropdown" disabled and user can't click on it
+7. When user clicks on "Enable/Disable" again, then "Button dropdown" active again
+8. When user clicks on "Button dropdown" again, then dropdown opened and there are 4 items
+9. When user clicks on any item, dropdown closes
+
+Variations:
+-----------
+2*. User scroll to Disabled menu sub-menu

docs/spec/dropdowns/dropdowns.examples.dropup-variation.use-case.md

@@ -0,0 +1,20 @@
+6.11: Dropdowns Dropup variation example
+========================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user example how to make dropdown which opens to top
+
+Main success scenario:
+----------------------
+1. User opens Dropdowns demo page
+2. User clicks on Dropup variation sub-menu
+3. User see clickable button "Dropup"
+4. When user clicks on this button, then dropdown opened to top and there are 4 items, one of them is separated
+5. When user clicks on any item, then dropdown closes
+6. Component src should be implemented with isDropup = true param
+
+Variations:
+-----------
+2*. User scroll to Dropup variation sub-menu

docs/spec/dropdowns/dropdowns.examples.manual-trigger.md

@@ -0,0 +1,26 @@
+6.4: Dropdowns Manual triggering example
+========================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user example how to trigger dropdown with show, hide and toggle methods
+
+Main success scenario:
+----------------------
+1. User opens Dropdowns demo page
+2. User clicks on Manual triggering sub-menu
+3. User see 4 clickable buttons: "Button dropdown", "Toggle", "Show", "Hide"
+4. When user clicks on "Button dropdown", then dropdown opened and there are 3 items
+5. When user clicks on any item, then dropdown closes
+6. When user clicks on "Toggle", then dropdown opened and there are 3 items
+7. When user clicks on "Toggle" again, then dropdown closes
+8. When user clicks on "Show", then dropdown opened and there are 3 items
+9. When user clicks on "Show" again, nothing happens
+10. When user clicks on any item, nothing happens
+11. When user clicks on "Hide", then dropdown closes
+12. Template src should be implemented with dropdown.show, dropdown.hide and dropdown.toggle
+
+Variations:
+-----------
+2*. User scroll to Manual triggering sub-menu

docs/spec/dropdowns/dropdowns.examples.mark-item-disabled.use-case.md

@@ -0,0 +1,22 @@
+6.7: Dropdowns Mark item as disabled example
+=================================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user example how to mark dropdown item as disabled
+
+Main success scenario:
+----------------------
+1. User opens Dropdowns demo page
+2. User clicks on Mark item as disabled sub-menu
+3. User see clickable button "Button dropdown"
+4. When user clicks on "Button dropdown", then dropdown opened and there are 3 items, first is disabled and other is enabled
+5. When user clicks on the first item, nothing happens
+6. When user clicks on the second item, then dropdown closes
+7. When user clicks on "Button dropdown" again, then dropdown opened and there are 3 items in the same state as previous
+8. When user clicks on the third item, then dropdown closes
+
+Variations:
+-----------
+2*. User scroll to Mark item as disabled sub-menu

docs/spec/dropdowns/dropdowns.examples.menu-alignment.use-case.md

@@ -0,0 +1,20 @@
+6.8: Dropdowns Menu alignment example
+=====================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user example how to align dropdown items
+
+Main success scenario:
+----------------------
+1. User opens Dropdowns demo page
+2. User clicks on Menu alignment sub-menu
+3. User see clickable button with long text "This dropdown's menu is right-aligned"
+4. When user clicks on this button, then dropdown opened and there are 4 items, one of them is separated
+5. Opened dropdown should be aligned to the right
+6. When user clicks on any item, then dropdown closes
+
+Variations:
+-----------
+2*. User scroll to Menu alignment sub-menu

docs/spec/dropdowns/dropdowns.examples.menu-dividers.use-case.md

@@ -0,0 +1,20 @@
+6.12: Dropdowns Menu dividers example
+=====================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user example how to separate dropdown items with divider
+
+Main success scenario:
+----------------------
+1. User opens Dropdowns demo page
+2. User clicks on Menu dividers sub-menu
+3. User see clickable button "Button dropdown"
+4. When user clicks on this button, then dropdown opened and there are 4 items, one of them is separated
+5. When user clicks on any item, then dropdown closes
+6. Template src should be implemented with divider class
+
+Variations:
+-----------
+2*. User scroll to Menu dividers sub-menu

docs/spec/dropdowns/dropdowns.examples.nested-dropdowns.use-case.md

@@ -0,0 +1,21 @@
+6.9: Dropdowns Nested dropdowns example
+=====================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user example with nested dropdowns
+
+Main success scenario:
+----------------------
+1. User opens Dropdowns demo page
+2. User clicks on Nested dropdowns sub-menu
+3. User see clickable button "dropdown has nested submenu"
+4. When user clicks on this button, then dropdown opened and there are 4 items, one of them is separated
+5. When user move mouse to the first item with caret, then nested dropdown opened and there are 3 items in the sub-menu
+6. When user move mouse to the second item with caret, then nested dropdown opened and there are 3 items in the sub-menu
+7. When user clicks on any item, then dropdown closes //TODO need to change link href from #/dropdowns#nested to #/dropdowns#nested-dropdowns
+
+Variations:
+-----------
+2*. User scroll to Nested dropdowns sub-menu

docs/spec/dropdowns/dropdowns.examples.split-button.use-case.md

@@ -0,0 +1,20 @@
+6.3: Dropdowns Split button example
+===================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user dropdown example with splitted button and caret
+
+Main success scenario:
+----------------------
+1. User opens Dropdowns demo page
+2. User clicks on Split button dropdowns sub-menu
+3. User see dropdown, which consist of 2 buttons: with text and with caret
+4. When user clicks on text, nothing happens
+5. When user clicks on caret, then dropdown opened and there are 4 items, 1 of them is separated
+6. When user clicks on any item, then dropdown closes
+
+Variations:
+-----------
+2*. User scroll to Split button dropdowns sub-menu

docs/spec/dropdowns/dropdowns.examples.state-change-event.use-case.md

@@ -0,0 +1,21 @@
+6.16: Dropdowns State change event example
+==========================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user example how to subscribe to dropdown state changing events
+
+Main success scenario:
+----------------------
+1. User opens Dropdowns demo page
+2. User clicks on State change event sub-menu
+3. User see clickable button "Button dropdown"
+4. When user clicks on "Button dropdown", then dropdown opened and there are 3 items and card "The dropdown is opened" shown
+5. When user clicks on any item, then dropdown closed and card "The dropdown is closed" is shown
+6. When user clicks on "Button dropdown" again, then dropdown opened and card "The dropdown is opened" is shown
+7. When user clicks on "Button dropdown" again, then dropdown closed and card "The dropdown is closed" is shown
+
+Variations:
+-----------
+2*. User scroll to State change event sub-menu

docs/spec/dropdowns/dropdowns.examples.trigger-by-a.use-case.md

@@ -0,0 +1,19 @@
+6.2: Dropdowns Trigger by tag \<a> example
+==========================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user example with link dropdowns
+
+Main success scenario:
+----------------------
+1. User opens Dropdowns demo page
+2. User clicks on Trigger by tag \<a> sub-menu
+3. User see clickable link
+4. When user clicks on it, then dropdown opened and there are 3 items
+5. When user clicks on any item, then dropdown closes
+
+Variations:
+-----------
+2*. User scroll to Trigger by tag \<a> sub-menu

docs/spec/dropdowns/dropdowns.examples.trigger-by-isopen.use-case.md

@@ -0,0 +1,23 @@
+6.5: Dropdowns Trigger by isOpen property example
+==========================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user example how to trigger dropdown by changing isOpen property
+
+Main success scenario:
+----------------------
+1. User opens Dropdowns demo page
+2. User clicks on Trigger by isOpen property sub-menu
+3. User see 2 clickable buttons "Button dropdown" and "Toggle"
+4. When user clicks on "Button dropdown", then dropdown opened and there are 3 items
+5. When user clicks on any item, nothing happens
+6. When user clicks on "Toggle", then dropdown closed
+7. When user clicks on "Toggle" again, then dropdown opened and there are 3 items
+8. When user clicks on "Toggle" again, then dropdown closed again
+9. Template src should be implemented with dropdown.isOpen
+
+Variations:
+-----------
+2*. User scroll to Trigger by isOpen property sub-menu

docs/spec/dropdowns/dropdowns.examples.visibility-events.use-case.md

@@ -0,0 +1,21 @@
+6.15: Dropdowns Visibility Events example
+=========================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user example how to subscribe to dropdown visibility events
+
+Main success scenario:
+----------------------
+1. User opens Dropdowns demo page
+2. User clicks on Visibility Events sub-menu
+3. User see clickable button "Button dropdown"
+4. When user clicks on "Button dropdown", then dropdown opened and there are 3 items and card "Event onShown is fired" should be shown
+5. When user clicks on any item, then dropdown closed and card "Event onHidden is fired" is shown
+6. When user clicks on "Button dropdown" again, then dropdown opened and card "Event onHidden is fired" is hidden
+7. When user clicks on any item, then dropdown closed and card "Event onHidden is fired" is shown again
+
+Variations:
+-----------
+2*. User scroll to Visibility Events sub-menu