From d625db0c6f3b263099699945f80dfeb83c8562b5 Mon Sep 17 00:00:00 2001 From: Ludmila Nesvitiy Date: Fri, 26 Oct 2018 16:36:55 +0300 Subject: [PATCH] feat(docs): add use-cases for popover component (#4740) --- ...opover.examples.append-to-body.use-case.md | 22 +++++++++++++++ .../popover.examples.basic.use-case.md | 19 +++++++++++++ ...er.examples.comp-level-styling.use-case.md | 20 ++++++++++++++ ...pover.examples.config-defaults.use-case.md | 21 +++++++++++++++ .../popover.examples.custom-class.use-case.md | 20 ++++++++++++++ ...amples.custom-content-template.use-case.md | 20 ++++++++++++++ ...opover.examples.custom-trigger.use-case.md | 26 ++++++++++++++++++ ...pover.examples.dismiss-on-next.use-case.md | 24 +++++++++++++++++ ...pover.examples.dynamic-content.use-case.md | 20 ++++++++++++++ .../popover.examples.dynamic-html.use-case.md | 19 +++++++++++++ ...opover.examples.manual-trigger.use-case.md | 22 +++++++++++++++ ...popover.examples.outside-click.use-case.md | 22 +++++++++++++++ .../popover.examples.placement.use-case.md | 27 +++++++++++++++++++ ...pover.examples.popover-context.use-case.md | 20 ++++++++++++++ ...ver.examples.trigger-by-isopen.use-case.md | 20 ++++++++++++++ ...ver.examples.visibility-events.use-case.md | 20 ++++++++++++++ 16 files changed, 342 insertions(+) create mode 100644 docs/spec/popover/popover.examples.append-to-body.use-case.md create mode 100644 docs/spec/popover/popover.examples.basic.use-case.md create mode 100644 docs/spec/popover/popover.examples.comp-level-styling.use-case.md create mode 100644 docs/spec/popover/popover.examples.config-defaults.use-case.md create mode 100644 docs/spec/popover/popover.examples.custom-class.use-case.md create mode 100644 docs/spec/popover/popover.examples.custom-content-template.use-case.md create mode 100644 docs/spec/popover/popover.examples.custom-trigger.use-case.md create mode 100644 docs/spec/popover/popover.examples.dismiss-on-next.use-case.md create mode 100644 docs/spec/popover/popover.examples.dynamic-content.use-case.md create mode 100644 docs/spec/popover/popover.examples.dynamic-html.use-case.md create mode 100644 docs/spec/popover/popover.examples.manual-trigger.use-case.md create mode 100644 docs/spec/popover/popover.examples.outside-click.use-case.md create mode 100644 docs/spec/popover/popover.examples.placement.use-case.md create mode 100644 docs/spec/popover/popover.examples.popover-context.use-case.md create mode 100644 docs/spec/popover/popover.examples.trigger-by-isopen.use-case.md create mode 100644 docs/spec/popover/popover.examples.visibility-events.use-case.md diff --git a/docs/spec/popover/popover.examples.append-to-body.use-case.md b/docs/spec/popover/popover.examples.append-to-body.use-case.md new file mode 100644 index 0000000000..c4c95082ac --- /dev/null +++ b/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 diff --git a/docs/spec/popover/popover.examples.basic.use-case.md b/docs/spec/popover/popover.examples.basic.use-case.md new file mode 100644 index 0000000000..7f08ebc065 --- /dev/null +++ b/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 diff --git a/docs/spec/popover/popover.examples.comp-level-styling.use-case.md b/docs/spec/popover/popover.examples.comp-level-styling.use-case.md new file mode 100644 index 0000000000..cd418f2b95 --- /dev/null +++ b/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 diff --git a/docs/spec/popover/popover.examples.config-defaults.use-case.md b/docs/spec/popover/popover.examples.config-defaults.use-case.md new file mode 100644 index 0000000000..27c9a3c73d --- /dev/null +++ b/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 diff --git a/docs/spec/popover/popover.examples.custom-class.use-case.md b/docs/spec/popover/popover.examples.custom-class.use-case.md new file mode 100644 index 0000000000..91e3c1450a --- /dev/null +++ b/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 diff --git a/docs/spec/popover/popover.examples.custom-content-template.use-case.md b/docs/spec/popover/popover.examples.custom-content-template.use-case.md new file mode 100644 index 0000000000..d572c6685f --- /dev/null +++ b/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 diff --git a/docs/spec/popover/popover.examples.custom-trigger.use-case.md b/docs/spec/popover/popover.examples.custom-trigger.use-case.md new file mode 100644 index 0000000000..0d0091c293 --- /dev/null +++ b/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 diff --git a/docs/spec/popover/popover.examples.dismiss-on-next.use-case.md b/docs/spec/popover/popover.examples.dismiss-on-next.use-case.md new file mode 100644 index 0000000000..9b785d17d0 --- /dev/null +++ b/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 diff --git a/docs/spec/popover/popover.examples.dynamic-content.use-case.md b/docs/spec/popover/popover.examples.dynamic-content.use-case.md new file mode 100644 index 0000000000..9485c52b41 --- /dev/null +++ b/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 diff --git a/docs/spec/popover/popover.examples.dynamic-html.use-case.md b/docs/spec/popover/popover.examples.dynamic-html.use-case.md new file mode 100644 index 0000000000..e4924dd504 --- /dev/null +++ b/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 diff --git a/docs/spec/popover/popover.examples.manual-trigger.use-case.md b/docs/spec/popover/popover.examples.manual-trigger.use-case.md new file mode 100644 index 0000000000..a8898554c9 --- /dev/null +++ b/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 diff --git a/docs/spec/popover/popover.examples.outside-click.use-case.md b/docs/spec/popover/popover.examples.outside-click.use-case.md new file mode 100644 index 0000000000..a2cab03db0 --- /dev/null +++ b/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 diff --git a/docs/spec/popover/popover.examples.placement.use-case.md b/docs/spec/popover/popover.examples.placement.use-case.md new file mode 100644 index 0000000000..d6ccb20b88 --- /dev/null +++ b/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 diff --git a/docs/spec/popover/popover.examples.popover-context.use-case.md b/docs/spec/popover/popover.examples.popover-context.use-case.md new file mode 100644 index 0000000000..4833620246 --- /dev/null +++ b/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 diff --git a/docs/spec/popover/popover.examples.trigger-by-isopen.use-case.md b/docs/spec/popover/popover.examples.trigger-by-isopen.use-case.md new file mode 100644 index 0000000000..81c83da747 --- /dev/null +++ b/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 diff --git a/docs/spec/popover/popover.examples.visibility-events.use-case.md b/docs/spec/popover/popover.examples.visibility-events.use-case.md new file mode 100644 index 0000000000..eeaefc74e2 --- /dev/null +++ b/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