feat(docs): add use-cases for popover component (#4740)

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

@@ -0,0 +1,22 @@
+9.7: Popover Append to body example
+===================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user how to make popover appended to body
+
+Main success scenario:
+----------------------
+1. User opens Popover demo page
+2. User clicks on Append to body sub-menu
+3. User see 2 clickable buttons "Default popover" and "Popover appended to body"
+4. When user clicks on "Default popover", then popover-container shown on the top of button with specific text //TODO popover not visible
+5. When user clicks on "Default popover" again, then popover-container disappeared
+6. When user clicks on "Popover appended to body", then popover-container shown on the top of button with specific text
+7. When user clicks on "Popover appended to body" again, then popover-container disappeared
+8. Template src should be written with container="body"
+
+Variations:
+-----------
+2*. User scroll to Append to body sub-menu

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

@@ -0,0 +1,19 @@
+9.1: Popover basic example
+==========================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user basic popover functionality
+
+Main success scenario:
+----------------------
+1. User opens Popover demo page
+2. User clicks on Basic sub-menu
+3. User see clickable button "Live demo"
+4. When user clicks on "Live demo", then popover-container shown on the top of button with specific text
+5. When user clicks on "Live demo" again, then popover-container disappeared
+
+Variations:
+-----------
+2*. User scroll to Basic sub-menu

docs/spec/popover/popover.examples.comp-level-styling.use-case.md

@@ -0,0 +1,20 @@
+9.14: Popover Component level styling example
+=============================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user how change popover styles at the component level
+
+Main success scenario:
+----------------------
+1. User opens Popover demo page
+2. User clicks on Component level styling sub-menu
+3. User see clickable button "I have component level styling"
+4. When user clicks on "I have component level styling", then popover-container appear above the button with specific style
+5. When user clicks on "I have component level styling" again, then popover-container disappeared
+6. Component src should be written with appropriate styles
+
+Variations:
+-----------
+2*. User scroll to Component level styling sub-menu

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

@@ -0,0 +1,21 @@
+9.9: Popover Configuring defaults example
+=========================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user how to configure default popover parameters
+
+Main success scenario:
+----------------------
+1. User opens Popover demo page
+2. User clicks on Configuring defaults sub-menu
+3. User see clickable button "Preconfigured popover"
+4. When user clicks on "Preconfigured popover", then popover-container shown on the right of button with specific text
+5. When user clicks on "Preconfigured popover" again, nothing happens
+5. When user clicks outside of "Preconfigured popover", then popover-container disabled
+6. Component src should be written with PopoverConfig and parameters: placement: "right", triggers: "focus"
+
+Variations:
+-----------
+2*. User scroll to Configuring defaults sub-menu

docs/spec/popover/popover.examples.custom-class.use-case.md

@@ -0,0 +1,20 @@
+9.15: Popover Custom class example
+==================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user how make popovers with custom classes
+
+Main success scenario:
+----------------------
+1. User opens Popover demo page
+2. User clicks on Custom class sub-menu
+3. User see clickable button "Custom class demo"
+4. When user clicks on "Custom class demo", then popover-container appear above the button with specific style
+5. When user clicks on "Custom class demo" again, then popover-container disappeared
+6. Template src should be written with containerClass="customClass"
+
+Variations:
+-----------
+2*. User scroll to Custom class sub-menu

docs/spec/popover/popover.examples.custom-content-template.use-case.md

@@ -0,0 +1,20 @@
+9.5: Popover Custom content template example
+============================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user how to provide template refs as a content for popover
+
+Main success scenario:
+----------------------
+1. User opens Popover demo page
+2. User clicks on Custom content template sub-menu
+3. User see clickable button "TemplateRef binding"
+4. When user clicks on "TemplateRef binding", then popover-container shown on the top of button with specific text and header "Template ref content inside"
+5. When user clicks on "TemplateRef binding" again, then popover-container disappeared
+6. Template src should be written with ng-template and \[popover]=param
+
+Variations:
+-----------
+2*. User scroll to Custom content template sub-menu

docs/spec/popover/popover.examples.custom-trigger.use-case.md

@@ -0,0 +1,26 @@
+9.11: Popover Custom triggers example
+=====================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user how to configure different triggers for popover
+
+Main success scenario:
+----------------------
+1. User opens Popover demo page
+2. User clicks on Custom triggers sub-menu
+3. User see 2 clickable buttons "Hover over me!" and "Double click me!" and input with placeholder: "Show popover on input change"
+4. When user move mouse to "Hover over me!", then popover-container shown on the top of button with specific text
+5. When user move mouse out of the "Hover over me!", then popover-container disappeared
+6. When user clicks once on "Double click me!", nothing happens
+7. When user double clicks on "Double click me!", then popover-container shown on the top of button with specific text
+8. When user clicks once (or click outside) on "Double click me!" again, nothing happens
+9. When user double clicks on "Double click me!", then popover-container disappeared
+10. When user clicks inside the input, nothing happens
+11. When user send any key to the input, then popover-container shown on the top of input with specific text
+12. When user click outside of the input field, then popover-container disappeared
+
+Variations:
+-----------
+2*. User scroll to Custom triggers sub-menu

docs/spec/popover/popover.examples.dismiss-on-next.use-case.md

@@ -0,0 +1,24 @@
+9.3: Popover Dismiss on next click example
+==========================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user how to dismiss popovers using focus trigger
+
+Main success scenario:
+----------------------
+1. User opens Popover demo page
+2. User clicks on Dismiss on next click sub-menu
+3. User see clickable button "Dismissible popover"
+4. When user clicks on "Dismissible popover", then popover-container shown with specific text
+5. When user clicks on "Dismissible popover" again, then nothing happens
+6. When user move mouse to the popover-container and click there, then popover-container disappeared
+
+Extentions:
+-----------
+6.1. When user move mouse out of the popover-container and button, and click anywhere, then popover-container disappeared
+
+Variations:
+-----------
+2*. User scroll to Dismiss on next click sub-menu

docs/spec/popover/popover.examples.dynamic-content.use-case.md

@@ -0,0 +1,20 @@
+9.4: Popover Dynamic content example
+==========================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user how to make popovers with dynamic content
+
+Main success scenario:
+----------------------
+1. User opens Popover demo page
+2. User clicks on Dynamic content sub-menu
+3. User see clickable button "Simple binding"
+4. When user clicks on "Simple binding", then popover-container shown on the top of button with specific text and header (from component src)
+5. When user clicks on "Simple binding" again, then popover-container disappeared
+6. Component src should be written with title and content params
+
+Variations:
+-----------
+2*. User scroll to Dynamic content sub-menu

docs/spec/popover/popover.examples.dynamic-html.use-case.md

@@ -0,0 +1,19 @@
+9.6: Popover Dynamic Html example
+============================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user how to make popovers with dynamic html
+
+Main success scenario:
+----------------------
+1. User opens Popover demo page
+2. User clicks on Dynamic Html sub-menu
+3. User see clickable button "Show me popover with html"
+4. When user clicks on "Show me popover with html", then popover-container shown on the top of button with specific text and additional html block
+5. When user clicks on "Show me popover with html" again, then popover-container disappeared
+
+Variations:
+-----------
+2*. User scroll to Dynamic Html sub-menu

docs/spec/popover/popover.examples.manual-trigger.use-case.md

@@ -0,0 +1,22 @@
+9.12: Popover Manual triggering example
+=======================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user how to manually trigger the popover
+
+Main success scenario:
+----------------------
+1. User opens Popover demo page
+2. User clicks on Manual triggering sub-menu
+3. User see 3 clickable buttons "Show", "Hide" and "Toggle" and text "Text has attached popover"
+4. When user clicks on "Show", then popover-container appear  above the text
+5. When user clicks on "Hide", then popover-container disappeared
+6. When user clicks on "Toggle", then popover-container appear  above the text
+7. When user clicks on "Toggle" again, then popover-container disappeared
+8. Template src should be written with show, hide, toggle methods
+
+Variations:
+-----------
+2*. User scroll to Manual triggering sub-menu

docs/spec/popover/popover.examples.outside-click.use-case.md

@@ -0,0 +1,22 @@
+9.10: Popover Outside click example
+===================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user how to configure popover with outside click closing
+
+Main success scenario:
+----------------------
+1. User opens Popover demo page
+2. User clicks on Outside click sub-menu
+3. User see clickable button "Live demo"
+4. When user clicks on "Live demo", then popover-container shown on the top of button with specific text
+5. When user clicks on "Live demo" again, then popover-container disappeared
+6. When user clicks on "Live demo" again, then popover-container shown on the top of button with specific text again
+7. When user clicks outside of "Live demo", then popover-container disappeared
+8. Template src should be written with \[outsideClick]="true" parameter
+
+Variations:
+-----------
+2*. User scroll to Outside click sub-menu

docs/spec/popover/popover.examples.placement.use-case.md

@@ -0,0 +1,27 @@
+9.2: Popover Placement example
+==============================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user available positions of popover placement
+
+Main success scenario:
+----------------------
+1. User opens Popover demo page
+2. User clicks on Placement sub-menu
+3. User see 5 clickable buttons "Popover on top", "Popover on right", "Popover auto", "Popover on left", "Popover on bottom"
+4. When user click on "Popover on top", then popover-container shown on the top of button with specific text and header "Popover on top"
+5. When user click on "Popover on top" again, then popover-container disappeared
+6. When user click on "Popover on right", then popover-container shown on the right of button with specific text and header "Popover on right"
+7. When user click on "Popover on right" again, then popover-container disappeared
+8. When user click on "Popover auto", then popover-container shown on the right of button with specific text and header "Popover auto"
+9. When user click on "Popover auto" again, then popover-container disappeared
+10. When user click on "Popover on left", then popover-container shown on the left of button with specific text and header "Popover on left"
+11. When user click on "Popover on left" again, then popover-container disappeared
+12. When user click on "Popover on bottom", then popover-container shown on the bottom of button with specific text and header "Popover on bottom"
+13. When user click on "Popover on bottom" again, then popover-container disappeared
+
+Variations:
+-----------
+2*. User scroll to Placement sub-menu

docs/spec/popover/popover.examples.popover-context.use-case.md

@@ -0,0 +1,20 @@
+9.16: Popover Popover context example
+=====================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user how make popovers with custom context
+
+Main success scenario:
+----------------------
+1. User opens Popover demo page
+2. User clicks on Popover context sub-menu
+3. User see clickable button "Open popover with custom context"
+4. When user clicks on "Open popover with custom context", then popover-container appear above the button with specific text
+5. When user clicks on "Open popover with custom context" again, then popover-container disappeared
+6. Component src should be written with context variable, which used in the template as a value for popover
+
+Variations:
+-----------
+2*. User scroll to Popover context sub-menu

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

@@ -0,0 +1,20 @@
+9.13: Popover Trigger by isOpen property example
+================================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user how to trigger the popover by isOpen property
+
+Main success scenario:
+----------------------
+1. User opens Popover demo page
+2. User clicks on Trigger by isOpen property sub-menu
+3. User see clickable button "Toggle" and text "Text has attached popover"
+4. When user clicks on "Toggle", then popover-container appear  above the text
+5. When user clicks on "Toggle" again, then popover-container disappeared
+6. Template src should be written with isOpen property
+
+Variations:
+-----------
+2*. User scroll to Trigger by isOpen property sub-menu

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

@@ -0,0 +1,20 @@
+9.8: Popover Visibility events example
+======================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user how to handle popover visibility events
+
+Main success scenario:
+----------------------
+1. User opens Popover demo page
+2. User clicks on Visibility events sub-menu
+3. User see clickable button "Live demo" and card with "Event: " text
+4. When user clicks on "Live demo", then popover-container shown on the top of button with specific text and card updated with "Event: shown" text
+5. When user clicks on "Live demo" again, then popover-container disappeared and card updated with "Event: hidden" text
+6. Component src should be written with onShown and onHidden methods
+
+Variations:
+-----------
+2*. User scroll to Visibility events sub-menu