From 6e32261c689afd50347aa126460c624f67984b16 Mon Sep 17 00:00:00 2001 From: OlegDubrovskyi <32369341+OlegDubrovskyi@users.noreply.github.com> Date: Fri, 12 Oct 2018 12:59:52 +0300 Subject: [PATCH] feat(doc): added docs for modals component (#4679) --- docs/spec/index.md | 72 +++++++++++++++++++ ...als.directive-examples.auto-shown-modal.md | 22 ++++++ ...directive-examples.child-modal.use-case.md | 21 ++++++ ...rective-examples.modal-events.use-cases.md | 25 +++++++ ...ective-examples.nested-modals.use-cases.md | 34 +++++++++ ...odals.directive-examples.optional-sizes.md | 23 ++++++ ...rective-examples.static-modal.use-cases.md | 22 ++++++ ...vice-examples.animation-option.use-case.md | 24 +++++++ ...vice-examples.backdrop-options.use-case.md | 27 +++++++ ...als.service-examples.component.use-case.md | 24 +++++++ ...ervice-examples.confirm-window.use-case.md | 23 ++++++ ...vice-examples.custom-css-class.use-case.md | 22 ++++++ ...ce-examples.esc-closing-option.use-case.md | 25 +++++++ ...modals.service-examples.events.use-case.md | 25 +++++++ ...modals.service-examples.nested.use-case.md | 33 +++++++++ ...xamples.scrolling-long-content.use-case.md | 24 +++++++ ...dals.service-examples.template.use-case.md | 23 ++++++ ...e-examples.tooltip-and-popover.use-case.md | 26 +++++++ 18 files changed, 495 insertions(+) create mode 100644 docs/spec/index.md create mode 100644 docs/spec/modals/modals.directive-examples.auto-shown-modal.md create mode 100644 docs/spec/modals/modals.directive-examples.child-modal.use-case.md create mode 100644 docs/spec/modals/modals.directive-examples.modal-events.use-cases.md create mode 100644 docs/spec/modals/modals.directive-examples.nested-modals.use-cases.md create mode 100644 docs/spec/modals/modals.directive-examples.optional-sizes.md create mode 100644 docs/spec/modals/modals.directive-examples.static-modal.use-cases.md create mode 100644 docs/spec/modals/modals.service-examples.animation-option.use-case.md create mode 100644 docs/spec/modals/modals.service-examples.backdrop-options.use-case.md create mode 100644 docs/spec/modals/modals.service-examples.component.use-case.md create mode 100644 docs/spec/modals/modals.service-examples.confirm-window.use-case.md create mode 100644 docs/spec/modals/modals.service-examples.custom-css-class.use-case.md create mode 100644 docs/spec/modals/modals.service-examples.esc-closing-option.use-case.md create mode 100644 docs/spec/modals/modals.service-examples.events.use-case.md create mode 100644 docs/spec/modals/modals.service-examples.nested.use-case.md create mode 100644 docs/spec/modals/modals.service-examples.scrolling-long-content.use-case.md create mode 100644 docs/spec/modals/modals.service-examples.template.use-case.md create mode 100644 docs/spec/modals/modals.service-examples.tooltip-and-popover.use-case.md diff --git a/docs/spec/index.md b/docs/spec/index.md new file mode 100644 index 0000000000..476e5551db --- /dev/null +++ b/docs/spec/index.md @@ -0,0 +1,72 @@ +**Use-cases for each NGX-Bootstrap component show examples of using it by user** + +## Accordion + +## Alerts + + +## Buttons + + +## Carousel + +## Collapse + +## Datepicker + +## Dropdowns + +## Modals + +[Service examples. Template](modals/modals.service-examples.template.use-case.md) + +[Service examples. Component](modals/modals.service-examples.component.use-case.md) + +[Service examples. Nested](modals/modals.service-examples.nested.use-case.md) + +[Service examples. Scrolling long content](modals/modals.service-examples.scrolling-long-content.use-case.md) + +[Service examples. Events](modals/modals.service-examples.events.use-case.md) + +[Service examples. Confirm Window](modals/modals.service-examples.confirm-window.use-case.md) + +[Service examples. Сustom css class](modals/modals.service-examples.custom-css-class.use-case.md) + +[Service examples. Animation option](modals/modals.service-examples.animation-option.use-case.md) + +[Service examples. Esc closing option](modals/modals.service-examples.esc-closing-option.use-case.md) + +[Service examples. Modal window with tooltip and popover](modals/modals.service-examples.tooltip-and-popover.use-case.md) + +[Service examples. Backdrop options](modals/modals.service-examples.backdrop-options.use-case.md) + +[Directive examples. Static modal](modals/modals.directive-examples.static-modal.use-cases.md) + +[Directive examples. Optional sizes](modals/modals.directive-examples.optional-sizes.md) + +[Directive examples. Child modal](modals/modals.directive-examples.child-modal.use-case.md) + +[Directive examples. Nested modals](modals/modals.directive-examples.nested-modals.use-cases.md) + +[Directive examples. Modal events](modals/modals.directive-examples.modal-events.use-cases.md) + +[Directive examples. Auto shown modal](modals/modals.directive-examples.auto-shown-modal.md) + + +## Pagination + +## Popover + +## Progressbar + +## Rating + +## Sortable + +## Tabs + +## Timepicker + +## Tooltip + +## Typeahead diff --git a/docs/spec/modals/modals.directive-examples.auto-shown-modal.md b/docs/spec/modals/modals.directive-examples.auto-shown-modal.md new file mode 100644 index 0000000000..0e2657bb68 --- /dev/null +++ b/docs/spec/modals/modals.directive-examples.auto-shown-modal.md @@ -0,0 +1,22 @@ +7.17: Modals service auto shown modal +================================================= + +**Primary Actor**: User + +**Scope**: Ngx-bootstrap DEMO / BS version 3&4 + +**Goal**: Show user auto shown modal functionality + +Main success scenario: +---------------------- + +1. User opens "Modals" demo page +2. User clicks on "Auto shown modal" sub-menu +3. After click on "Render auto-shown modal" button, then modal popup is opened +4. When user closes modal popup by click on the cross, modal popup is removed from the DOM + +Variations: +---------- + +2*. User scrolls to "Auto shown modal" + diff --git a/docs/spec/modals/modals.directive-examples.child-modal.use-case.md b/docs/spec/modals/modals.directive-examples.child-modal.use-case.md new file mode 100644 index 0000000000..c13d771a31 --- /dev/null +++ b/docs/spec/modals/modals.directive-examples.child-modal.use-case.md @@ -0,0 +1,21 @@ +7.13: Modals directive examples child modal +=============================================== + +**Primary Actor**: User + +**Scope**: Ngx-bootstrap DEMO / BS version 3&4 + +**Goal**: Show user Child modal functionality + +Main success scenario: +---------------------- + +1. User opens "Modals" demo page +2. User clicks on "Child modal" sub-menu +3. After click on "Open child modal" button, child modal popup is opened +4. When user closes modal popup by click on the cross, modal popup closed + +Variations: +---------- + +2*. User scrolls to "Child modal" diff --git a/docs/spec/modals/modals.directive-examples.modal-events.use-cases.md b/docs/spec/modals/modals.directive-examples.modal-events.use-cases.md new file mode 100644 index 0000000000..8dbc1f8225 --- /dev/null +++ b/docs/spec/modals/modals.directive-examples.modal-events.use-cases.md @@ -0,0 +1,25 @@ +7.16: Modals service modal events +================================================= + +**Primary Actor**: User + +**Scope**: Ngx-bootstrap DEMO / BS version 3&4 + +**Goal**: Show user modals events functionality + +Main success scenario: +---------------------- + +1. User opens "Modals" demo page +2. User clicks on "Modal events" sub-menu +3. When user clicks on "Open modal" button, modal popup is opened, should be messages "event onShow is fired" and "event onShown is fired" +4. When user closes modal popup by click on the cross, should be messages "event onHide is fired" and "event onHidden is fired" + +Variations: +---------- + +2*. User scrolls to "Modals events" +4*. When user closes modal popup by click on backdrop, should be messages "event onHide is fired, dismissed by backdrop-click" +and "event onHidden is fired, dismissed by backdrop-click" +4**. When user closes modal popup by click ESC, should be messages "event onHide is fired, dismissed by esc" +and "event onHidden is fired, dismissed by esc" diff --git a/docs/spec/modals/modals.directive-examples.nested-modals.use-cases.md b/docs/spec/modals/modals.directive-examples.nested-modals.use-cases.md new file mode 100644 index 0000000000..5612184d56 --- /dev/null +++ b/docs/spec/modals/modals.directive-examples.nested-modals.use-cases.md @@ -0,0 +1,34 @@ +7.14: Modals directive examples nested modals +=============================================== + +**Primary Actor**: User + +**Scope**: Ngx-bootstrap DEMO / BS version 3&4 + +**Goal**: Show user Child modal functionality + +Main success scenario: +---------------------- + +1. User opens "Modals" demo page +2. User clicks on "Nested modals" sub-menu +3. After click on "Open parent modal" button, modal popup is opened and user sees "Open second modal" button +4. When user clicks on "Open second modal" button, then second modal is opened, user sees + "Open third modal button", backdrop is changed +5. When user clicks on "Open third modal button" button, then second modal is opened, backdrop is changed +6. When user closes third modal popup by click on the cross, then third modal popup is closed, backdrop is changed +7. When user closes second modal popup by click on the cross, then second modal popup is closed, backdrop is changed +8. When user closes first modal popup by click on the cross, then first modal popup is closed, backdrop is closed + +Variations: +---------- + +2*. User scrolls to "Nested modals" +6*. When user closes third modal popup by backdrop click, then third modal popup is closed, backdrop is changed +6**. When user closes third modal popup by click ESC , then third modal popup is closed, backdrop is changed + +7*. When user closes second modal popup by backdrop click, then second modal popup is closed, backdrop is changed +7**. When user closes second modal popup by click ESC , then second modal popup is closed, backdrop is changed + +8*. When user closes first modal popup by backdrop click, then first modal popup is closed, backdrop is changed +8**. When user closes first modal popup by click ESC , then first modal popup is closed, backdrop is changed diff --git a/docs/spec/modals/modals.directive-examples.optional-sizes.md b/docs/spec/modals/modals.directive-examples.optional-sizes.md new file mode 100644 index 0000000000..4c9ad542f0 --- /dev/null +++ b/docs/spec/modals/modals.directive-examples.optional-sizes.md @@ -0,0 +1,23 @@ +7.13: Modals directive examples optional sizes +=============================================== + +**Primary Actor**: User + +**Scope**: Ngx-bootstrap DEMO / BS version 3&4 + +**Goal**: Show user optional sizes functionality + +Main success scenario: +---------------------- + +1. User opens "Modals" demo page +2. User clicks on "Optional sizes" sub-menu +3. After click on "Large modal" button, large modal popup is opened +4. When user closes large modal popup by click on the cross, modal popup closed +5. After click on "Small modal" button, small modal popup is opened +6. When user closes modal popup by click on the cross, modal popup is closed + +Variations: +---------- + +2*. User scrolls to "Static modal" diff --git a/docs/spec/modals/modals.directive-examples.static-modal.use-cases.md b/docs/spec/modals/modals.directive-examples.static-modal.use-cases.md new file mode 100644 index 0000000000..7c587ae187 --- /dev/null +++ b/docs/spec/modals/modals.directive-examples.static-modal.use-cases.md @@ -0,0 +1,22 @@ +7.12: Modals directive examples static modal +============================================ + +**Primary Actor**: User + +**Scope**: Ngx-bootstrap DEMO / BS version 3&4 + +**Goal**: Show user static modal functionality + +Main success scenario: +---------------------- + +1. User opens "Modals" demo page +2. User clicks on "Static modal" sub-menu +4. After click on "Static modal" button, modal popup is opened +5. When user closes modal popup by backdrop click, modal popup is still opened +6. When user closes modal popup by click on the cross, modal popup is closed + +Variations: +---------- + +2*. User scrolls to "Static modal" diff --git a/docs/spec/modals/modals.service-examples.animation-option.use-case.md b/docs/spec/modals/modals.service-examples.animation-option.use-case.md new file mode 100644 index 0000000000..e1da120895 --- /dev/null +++ b/docs/spec/modals/modals.service-examples.animation-option.use-case.md @@ -0,0 +1,24 @@ +7.8: Modals service examples animation option +================================================= + +**Primary Actor**: User + +**Scope**: Ngx-bootstrap DEMO / BS version 3&4 + +**Goal**: Show user animation option functionality + +Main success scenario: +---------------------- + +1. User opens "Modals" demo page +2. User clicks on "Animation option" sub-menu +3. When user clicks on "Enable animation" button, title of button should change to "Disable animation" +4. And after that click on "Open modal with custom css class" button, modal popup is opened with animations effects +5. When user closes modal popup by click on the cross, modal popup is closed +6. When user clicks on "Disable animation" button, title of button change to "Enable animation" +7. And after that click on "Open modal with custom css class" button, modal popup is opened without animations effects + +Variations: +---------- + +2*. User scrolls to "Animation option" diff --git a/docs/spec/modals/modals.service-examples.backdrop-options.use-case.md b/docs/spec/modals/modals.service-examples.backdrop-options.use-case.md new file mode 100644 index 0000000000..3fae6933f8 --- /dev/null +++ b/docs/spec/modals/modals.service-examples.backdrop-options.use-case.md @@ -0,0 +1,27 @@ +7.11: Modals service examples backdrop options +============================================= + +**Primary Actor**: User + +**Scope**: Ngx-bootstrap DEMO / BS version 3&4 + +**Goal**: Show user modal window with tooltip and popover functionality + +Main success scenario: +---------------------- + +1. User opens "Modals" demo page +2. User clicks on "Backdrop options " sub-menu +3. When user clicks on "Enable backdrop" button, title of button should change to "Disable backdrop" +4. And after that click on "Open modal" button, modal popup is opened, backdrop is opened +5. When user clicks on "Disable backdrop" button, title of button should change to "Enable backdrop" +6. And after that click on "Open modal" button, modal popup is opened, backdrop is closed +7. When user clicks on "Disable backdrop click" button, title of button should change to "Enable backdrop click" +8. And after that open modal popup and close by click on backdrop, modal popup is opened +9. When user clicks on "Enable backdrop click" button, title of button should change to "Disable backdrop click" +10. And after that open modal popup and close by click on backdrop, modal popup is closed + +Variations: +---------- + +2*. User scrolls to "Modal window with tooltip and popover" diff --git a/docs/spec/modals/modals.service-examples.component.use-case.md b/docs/spec/modals/modals.service-examples.component.use-case.md new file mode 100644 index 0000000000..4cf5d0fdec --- /dev/null +++ b/docs/spec/modals/modals.service-examples.component.use-case.md @@ -0,0 +1,24 @@ +7.2: Modals service examples component +=================================== + +**Primary Actor**: User + +**Scope**: Ngx-bootstrap DEMO / BS version 3&4 + +**Goal**: Show user modal component functionality + +Main success scenario: +---------------------- + +1. User opens Modals demo page +2. User clicks on Component sub-menu +3. When user clicks on "Create template modal" button, modal popup is opened like a component, backdrop is enabled, "Close" button should be present +5. When user closes modal popup by click on the cross, modal popup is closed and backdrop is inactive + +Variations: +---------- + +2*. User scrolls to "Component" +5*. When user closes modal popup by click on backdrop, modal popup is closed and backdrop is disabled +5**. When user closes modal popup by click ESC, modal popup is closed and backdrop is disabled +5***. When user closes modal popup by click on Close button, modal popup is closed and backdrop is disabled diff --git a/docs/spec/modals/modals.service-examples.confirm-window.use-case.md b/docs/spec/modals/modals.service-examples.confirm-window.use-case.md new file mode 100644 index 0000000000..def99a2ecb --- /dev/null +++ b/docs/spec/modals/modals.service-examples.confirm-window.use-case.md @@ -0,0 +1,23 @@ +7.6: Modals service examples confirm window +================================================= + +**Primary Actor**: User + +**Scope**: Ngx-bootstrap DEMO / BS version 3&4 + +**Goal**: Show user modals confirm window functionality + +Main success scenario: +---------------------- + +1. User opens "Modals" demo page +2. User clicks on "Confirm Window" sub-menu +3. When user clicks on "Open modal" button, modal popup is opened, should contains two buttons: "yes" and "no" +4. When user closes modal popup by click on "Yes", should be messages "Confirmed!" + +Variations: +---------- + +2*. User scrolls to Confirm window +4*. When user closes modal popup by click on "No", should be messages "Declined!" + diff --git a/docs/spec/modals/modals.service-examples.custom-css-class.use-case.md b/docs/spec/modals/modals.service-examples.custom-css-class.use-case.md new file mode 100644 index 0000000000..f34a272736 --- /dev/null +++ b/docs/spec/modals/modals.service-examples.custom-css-class.use-case.md @@ -0,0 +1,22 @@ +7.7: Modals service examples custom css class +================================================= + +**Primary Actor**: User + +**Scope**: Ngx-bootstrap DEMO / BS version 3&4 + +**Goal**: Show user custom css class functionality + +Main success scenario: +---------------------- + +1. User opens "Modals" demo page +2. User clicks on "Сustom css class" sub-menu +3. When user clicks on "Open modal with custom css class" button, modal popup is opened with custom class +4. When user closes modal popup by the cross, modal popup is closed + +Variations: +---------- + +2*. User scrolls to "Custom css class" + diff --git a/docs/spec/modals/modals.service-examples.esc-closing-option.use-case.md b/docs/spec/modals/modals.service-examples.esc-closing-option.use-case.md new file mode 100644 index 0000000000..4811e653aa --- /dev/null +++ b/docs/spec/modals/modals.service-examples.esc-closing-option.use-case.md @@ -0,0 +1,25 @@ +7.9: Modals service examples esc closing option +=============================================== + +**Primary Actor**: User + +**Scope**: Ngx-bootstrap DEMO / BS version 3&4 + +**Goal**: Show user esc closing option functionality + +Main success scenario: +---------------------- + +1. User opens "Modals" demo page +2. User clicks on "Esc closing option" sub-menu +3. When user clicks on "Enable Esc" button, title of button should change to "Disable Esc" +4. And after that click on "Open modal" button, modal popup is opened +5. When user closes modal popup by click ESC, modal popup is closed +6. When user clicks on "Disable Esc" button, title of button change to "Enable Esc" +7. And after that click on "Open modal" button, modal popup is opened +8. When user closes modal popup by click ESC, modal popup is opened + +Variations: +---------- + +2*. User scrolls to "Esc closing option" diff --git a/docs/spec/modals/modals.service-examples.events.use-case.md b/docs/spec/modals/modals.service-examples.events.use-case.md new file mode 100644 index 0000000000..42e44e52ac --- /dev/null +++ b/docs/spec/modals/modals.service-examples.events.use-case.md @@ -0,0 +1,25 @@ +7.5: Modals service examples events +================================================= + +**Primary Actor**: User + +**Scope**: Ngx-bootstrap DEMO / BS version 3&4 + +**Goal**: Show user modals events functionality + +Main success scenario: +---------------------- + +1. User opens "Modals" demo page +2. User clicks on "Events" sub-menu +3. When user clicks on "Open modal" button, modal popup is opened, should be two messages "onShow event has been fired" +4. When user closes modal popup by click on the cross, should be messages "onHide event has been fired" and "onHidden event has been fired" + +Variations: +---------- + +2*. User scrolls to "Events" +4*. When user closes modal popup by click on backdrop, should be messages "onHide event has been fired, dismissed by backdrop-click" +and "onHidden event has been fired, dismissed by backdrop-click" +4**. When user closes modal popup by click ESC, should be messages "onHide event has been fired, dismissed by esc" +and "onHidden event has been fired, dismissed by esc" diff --git a/docs/spec/modals/modals.service-examples.nested.use-case.md b/docs/spec/modals/modals.service-examples.nested.use-case.md new file mode 100644 index 0000000000..cb4a07cfdb --- /dev/null +++ b/docs/spec/modals/modals.service-examples.nested.use-case.md @@ -0,0 +1,33 @@ +7.3: Modals service examples nested +=================================== + +**Primary Actor**: User + +**Scope**: Ngx-bootstrap DEMO / BS version 3&4 + +**Goal**: Show user modal nested functionality + +Main success scenario: +---------------------- + +1. User opens "Modals" demo page +2. User clicks on "Nedted" sub-menu +3. When user clicks on "Open first modal" button, modal popup is opened and contains button for opening second modal, backdrop is enabled +4. When user clicks on "Open second modal" in first popup, second modal popup is opened, "Close first modal" button should be present, backdrop is enabled +5. When user closes second modal popup by click on the cross, second modal popup is closed, first popup shown, backdrop is enabled +6. When user closes first modal popup by click on the cross, first popup is closed, backdrop is disabled + +Extensions: +---------- + +5a. When user closes second modal popup by click on backdrop, second modal popup is closed, first popup shown, backdrop is enabled +5b. When user closes second modal popup by click ESC, second modal popup is closed, first popup shown, backdrop is enabled +5c. When user closes second modal popup by click on "Close first modal" button, second modal popup is closed, first popup shown, backdrop is enabled + +6a. When user closes first modal popup by click ESC, first popup is closed, backdrop is disabled +6b. When user closes first modal popup by click on backdrop, first popup is closed, backdrop is disabled + +Variations: +---------- + +2*. User scrolls to "Nested" diff --git a/docs/spec/modals/modals.service-examples.scrolling-long-content.use-case.md b/docs/spec/modals/modals.service-examples.scrolling-long-content.use-case.md new file mode 100644 index 0000000000..22a2bad27d --- /dev/null +++ b/docs/spec/modals/modals.service-examples.scrolling-long-content.use-case.md @@ -0,0 +1,24 @@ +7.4: Modals service examples scrolling long content +================================================= + +**Primary Actor**: User + +**Scope**: Ngx-bootstrap DEMO / BS version 3&4 + +**Goal**: Show user modal scrolling long content functionality + +Main success scenario: +---------------------- + +1. User opens Modals demo page +2. User clicks on Scrolling long content sub-menu +3. When user clicks on "Open modal" button, modal popup is opened, backdrop is enabled +4. When user scroll content by mousewheel, content is scrolled successfully +5. When user closes modal popup by click on the cross, modal popup is closed and backdrop is disabled + +Variations: +---------- + +2*. User scrolls to Scrolling long content +4*. When user scroll content by up/down, content is scrolled successfully +4**. When user scroll content by PgUp/PgDn, content is scrolled successfully diff --git a/docs/spec/modals/modals.service-examples.template.use-case.md b/docs/spec/modals/modals.service-examples.template.use-case.md new file mode 100644 index 0000000000..12ae3f7b33 --- /dev/null +++ b/docs/spec/modals/modals.service-examples.template.use-case.md @@ -0,0 +1,23 @@ +7.1: Modals service examples template +===================================== + +**Primary Actor**: User + +**Scope**: Ngx-bootstrap DEMO / BS version 3&4 + +**Goal**: Show user modal template functionality + +Main success scenario: +---------------------- + +1. User opens Modals demo page +2. User clicks on Template sub-menu +3. When user clicks on "Create modal with component" button, modal popup is opened, backdrop is enabled +5. When user closes modal popup by click on the cross, modal popup is closed and backdrop is disabled + +Variations: +---------- + +2*. User scrolls to Template +5*. When user closes modal popup by click on backdrop, modal popup is closed and backdrop is disabled +5**. When user closes modal popup by click ESC, modal popup is closed and backdrop became is disabled diff --git a/docs/spec/modals/modals.service-examples.tooltip-and-popover.use-case.md b/docs/spec/modals/modals.service-examples.tooltip-and-popover.use-case.md new file mode 100644 index 0000000000..69127979e0 --- /dev/null +++ b/docs/spec/modals/modals.service-examples.tooltip-and-popover.use-case.md @@ -0,0 +1,26 @@ +7.10: Modals service examples modal window with tooltip and popover +================================================================ + +**Primary Actor**: User + +**Scope**: Ngx-bootstrap DEMO / BS version 3&4 + +**Goal**: Show user modal window with tooltip and popover functionality + +Main success scenario: +---------------------- + +1. User opens "Modals" demo page +2. User clicks on "Modal window with tooltip and popover" sub-menu +3. After click on "Open modal" button, modal popup is opened, popup should contain two buttons: "popover" and "tooltip" +4. When user clicks on "popover", popover is displayed +5. After click on "popover" again, popover is disappeared +6. When mouseover the "tooltip", tooltip is displayed +7. After cancel mouseover, tooltip is disappeared +8. When user clicks on "popover" and mouseover the "tooltip" and closes modal popup by ESC, modal popup is closed, +tooltips and popovers within are also automatically dismissed. + +Variations: +---------- + +2*. User scrolls to "Modal window with tooltip and popover"