From f67c76e70f8166b73ce7bdc25f1f43e935ccbdf7 Mon Sep 17 00:00:00 2001 From: OlegDubrovskyi <32369341+OlegDubrovskyi@users.noreply.github.com> Date: Fri, 26 Oct 2018 16:35:44 +0300 Subject: [PATCH] feat(docs): added use-cases for pagination component (#4684) --- docs/spec/index.md | 25 ++++++++++++++++ .../pagination.examples.basic.use-case.md | 23 ++++++++++++++ ...nation.examples.boundary-links.use-case.md | 26 ++++++++++++++++ ...ion.examples.centering-active-page-link.md | 30 +++++++++++++++++++ ...ion.examples.content-switching.use-case.md | 22 ++++++++++++++ ...examples.custom-links-content.use-cases.md | 26 ++++++++++++++++ ...ation.examples.direction-links.use-case.md | 21 +++++++++++++ .../pagination.examples.disabled.use-case.md | 22 ++++++++++++++ .../pagination.examples.limits.use-case.md | 23 ++++++++++++++ ...examples.manual-switching-page.use-case.md | 21 +++++++++++++ ...on.examples.page-changed-event.use-case.md | 23 ++++++++++++++ .../pagination.examples.pager.use-case.md | 25 ++++++++++++++++ ...ples.pages-count-changed-event.use-case.md | 23 ++++++++++++++ 13 files changed, 310 insertions(+) create mode 100644 docs/spec/pagination/pagination.examples.basic.use-case.md create mode 100644 docs/spec/pagination/pagination.examples.boundary-links.use-case.md create mode 100644 docs/spec/pagination/pagination.examples.centering-active-page-link.md create mode 100644 docs/spec/pagination/pagination.examples.content-switching.use-case.md create mode 100644 docs/spec/pagination/pagination.examples.custom-links-content.use-cases.md create mode 100644 docs/spec/pagination/pagination.examples.direction-links.use-case.md create mode 100644 docs/spec/pagination/pagination.examples.disabled.use-case.md create mode 100644 docs/spec/pagination/pagination.examples.limits.use-case.md create mode 100644 docs/spec/pagination/pagination.examples.manual-switching-page.use-case.md create mode 100644 docs/spec/pagination/pagination.examples.page-changed-event.use-case.md create mode 100644 docs/spec/pagination/pagination.examples.pager.use-case.md create mode 100644 docs/spec/pagination/pagination.examples.pages-count-changed-event.use-case.md diff --git a/docs/spec/index.md b/docs/spec/index.md index 946ff75fcd..5dc81d3bbc 100644 --- a/docs/spec/index.md +++ b/docs/spec/index.md @@ -143,6 +143,30 @@ ## Pagination +[Pagination. Basic](pagination/pagination.examples.basic.use-case.md) + +[Pagination. Manual switching page](pagination/pagination.examples.manual-switching-page.use-case.md) + +[Pagination. Page changed event](pagination/pagination.examples.page-changed-event.use-case.md) + +[Pagination. Pages count changed event](pagination/pagination.examples.pages-count-changed-event.use-case.md) + +[Pagination. Boundary links](pagination/pagination.examples.boundary-links.use-case.md) + +[Pagination. Direction links](pagination/pagination.examples.direction-links.use-case.md) + +[Pagination. Custom links content](pagination/pagination.examples.custom-links-content.use-cases.md) + +[Pagination. Disabled](pagination/pagination.examples.disabled.use-case.md) + +[Pagination. Limits](pagination/pagination.examples.limits.use-case.md) + +[Pagination. Centering the active page link](pagination/pagination.examples.centering-active-page-link.md) + +[Pagination. Content switching](pagination/pagination.examples.content-switching.use-case.md) + +[Pagination. Pager](pagination/pagination.examples.pager.use-case.md) + ## Popover ## Progressbar @@ -158,3 +182,4 @@ ## Tooltip ## Typeahead + diff --git a/docs/spec/pagination/pagination.examples.basic.use-case.md b/docs/spec/pagination/pagination.examples.basic.use-case.md new file mode 100644 index 0000000000..06ed676abc --- /dev/null +++ b/docs/spec/pagination/pagination.examples.basic.use-case.md @@ -0,0 +1,23 @@ +8.1: Pagination basic examples +============================== + + **Primary Actor**: User + + **Scope**: Ngx-bootstrap DEMO / BS version 3&4 + + **Goal**: Show user basic pagination functionality + + Main success scenario: +---------------------- + + 1. User opens Pagination demo page + 2. User clicks on Basic sub-menu + 3. By default 1st page is active, and previous button is disabled + 4. When user clicks on 3rd page, then next button is disabled, previous button is enabled, 1st page is inactive + and 3rd is active + 5. After click on 2d page, previous and next buttons are enabled, 2d page is active, other pages is inactive + + Variations: + ---------- + + 2*. User scrolls to "Basic" diff --git a/docs/spec/pagination/pagination.examples.boundary-links.use-case.md b/docs/spec/pagination/pagination.examples.boundary-links.use-case.md new file mode 100644 index 0000000000..220bab8824 --- /dev/null +++ b/docs/spec/pagination/pagination.examples.boundary-links.use-case.md @@ -0,0 +1,26 @@ +8.5: Pagination boundary links examples +======================================= + + **Primary Actor**: User + + **Scope**: Ngx-bootstrap DEMO / BS version 3&4 + + **Goal**: Show user boundary links functionality + + Main success scenario: +---------------------- + + 1. User opens "Pagination" demo page + 2. User clicks on "Boundary links" sub-menu + 3. By default "First" and "Previous" buttons are disabled, and 1st page is active + 4. After click on "Last" button, 6th page is active, 1st page is inactive, "Next" and "Last" buttons are disabled, + "First" and "Previous" buttons are enabled + 5. After click on First button, 1st page is active, 6th page is inactive, "Next" and "Last" buttons are enabled, + "First" and "Previous" buttons are disabled + 6. After click on "Hide/show boundary links", "First" and "Last" buttons are disappeared + 7. After click on "Hide/show boundary links" again, "First" and "Last" buttons are appeared + + Variations: + ---------- + + 2*. User scrolls to "Boundary links" diff --git a/docs/spec/pagination/pagination.examples.centering-active-page-link.md b/docs/spec/pagination/pagination.examples.centering-active-page-link.md new file mode 100644 index 0000000000..a44765516d --- /dev/null +++ b/docs/spec/pagination/pagination.examples.centering-active-page-link.md @@ -0,0 +1,30 @@ +8.10: Pagination Centering the active page link examples +============================================ + + **Primary Actor**: User + + **Scope**: Ngx-bootstrap DEMO / BS version 3&4 + + **Goal**: Show user centering the active page link functionality + + Main success scenario: +---------------------- + + 1. User opens "Pagination" demo page + 2. User clicks on "Centering the active page link" sub-menu + 3. By default maximum page numbers equal to 5 and active page 1. + 4. By default centering the active page link is enabled + 5. When user clicks on 5th page, then active page - 5 and it centered, maximum count of pages - 5 + 6. After click on "Next" button, then active page - 6 and it centered, maximum count of pages - 5 + 7. After click on "Previous" button, then active page - 5 and it centered , maximum count of pages should 5 + 8. When user clicks on "Toggle centering current page link", then "last" and "first" buttons are appeared, should marked like "..." + 9. When user clicks on 5th page, then active page - 5 and it located by right side, maximum count of pages - 5 + 10.After click on "Next" button, then active page - 6 and it located by left side, maximum count page - 5 + 11. After click on "Previous" button, then active page - 5 and it located by left side, maximum count of pages - 5 + 12. After click on "Last" button, next 5 pages are appeared, maximum count of pages - 5 + 13. After click on "Previous" button, Previous 5 pages are appeared, maximum count of pages - 5 + + Variations: + ---------- + + 2*. User scrolls to "Centering the active page" diff --git a/docs/spec/pagination/pagination.examples.content-switching.use-case.md b/docs/spec/pagination/pagination.examples.content-switching.use-case.md new file mode 100644 index 0000000000..f154096777 --- /dev/null +++ b/docs/spec/pagination/pagination.examples.content-switching.use-case.md @@ -0,0 +1,22 @@ +8.11: Pagination content switching examples +============================================ + + **Primary Actor**: User + + **Scope**: Ngx-bootstrap DEMO / BS version 3&4 + + **Goal**: Show user content switching functionality + + Main success scenario: +---------------------- + + 1. User opens "Pagination" demo page + 2. User clicks on "Content switching" sub-menu + 3. After click on "Next" button, pagination content should be changed + 4. After click on "Previous" button, pagination content should be as default + 5. When user clicks on next/previous page, pagination content should be changed + + Variations: + ---------- + + 2*. User scrolls to "Content switching" diff --git a/docs/spec/pagination/pagination.examples.custom-links-content.use-cases.md b/docs/spec/pagination/pagination.examples.custom-links-content.use-cases.md new file mode 100644 index 0000000000..bfcacb0143 --- /dev/null +++ b/docs/spec/pagination/pagination.examples.custom-links-content.use-cases.md @@ -0,0 +1,26 @@ +8.7: Pagination custom links content examples +============================================ + + **Primary Actor**: User + + **Scope**: Ngx-bootstrap DEMO / BS version 3&4 + + **Goal**: Show user custom links content functionality + + Main success scenario: +---------------------- + + 1. User opens "Pagination" demo page + 2. User clicks on "Custom links content" sub-menu + 3. Instead of text, pagination should be with arrow links "«" and "‹", "›", "»" + 4. After click on "Last link", "Next link" and "Last link" are disabled, 8th page is active, + "First link" and "Previous" link are enabled + 5. After click on "First link", "Next link" and "Last link" are enabled, 1st page is active, + "First link" and "Previous" link are disabled + 6. After click on "Next link", next page is active + 7. After click on "Previous link", previous page is active + + Variations: + ---------- + + 2*. User scrolls to "Custom links content" diff --git a/docs/spec/pagination/pagination.examples.direction-links.use-case.md b/docs/spec/pagination/pagination.examples.direction-links.use-case.md new file mode 100644 index 0000000000..853fabaead --- /dev/null +++ b/docs/spec/pagination/pagination.examples.direction-links.use-case.md @@ -0,0 +1,21 @@ +8.6: Pagination direction links examples +======================================= + + **Primary Actor**: User + + **Scope**: Ngx-bootstrap DEMO / BS version 3&4 + + **Goal**: Show user direction links functionality + + Main success scenario: +---------------------- + + 1. User opens "Pagination" demo page + 2. User clicks on "Direction links" sub-menu + 3. When user clicks on "Hide/show direction links" button, then "Previous" and "Next" buttons are disappeared + 4. When user clicks on "Hide/show direction links" button again, then "Previous" and "Next" buttons are appeared + + Variations: + ---------- + + 2*. User scrolls to "Direction links" diff --git a/docs/spec/pagination/pagination.examples.disabled.use-case.md b/docs/spec/pagination/pagination.examples.disabled.use-case.md new file mode 100644 index 0000000000..6235f50caa --- /dev/null +++ b/docs/spec/pagination/pagination.examples.disabled.use-case.md @@ -0,0 +1,22 @@ +8.8: Pagination disabled examples +============================================ + + **Primary Actor**: User + + **Scope**: Ngx-bootstrap DEMO / BS version 3&4 + + **Goal**: Show user disabled functionality + + Main success scenario: +---------------------- + + 1. User opens "Pagination" demo page + 2. User clicks on "Disabled" sub-menu + 3. By default pagination panel is enabled + 3. When user clicks on "Toggle state" button,then pagination panel is disabled + 4. When user clicks on "Toggle state" button again,then pagination panel is enabled + + Variations: + ---------- + + 2*. User scrolls to "Disabled" diff --git a/docs/spec/pagination/pagination.examples.limits.use-case.md b/docs/spec/pagination/pagination.examples.limits.use-case.md new file mode 100644 index 0000000000..3e665fa9f1 --- /dev/null +++ b/docs/spec/pagination/pagination.examples.limits.use-case.md @@ -0,0 +1,23 @@ +8.9: Pagination limits examples +============================================ + + **Primary Actor**: User + + **Scope**: Ngx-bootstrap DEMO / BS version 3&4 + + **Goal**: Show user limits functionality + + Main success scenario: +---------------------- + + 1. User opens "Pagination" demo page + 2. User clicks on "Limits" sub-menu + 3. By default maximum page numbers equal to 5 and active page: "1" + 4. When user clicks on 5th page, then active page - 5 and it centered, maximum count of pages - 5 + 5. After click on "Next" button, then active page - 6 and it centered, maximum count of pages - 5 + 6. After click on "Previous" button, then active page - 5 and it centered, maximum count of pages - 5 + + Variations: + ---------- + + 2*. User scrolls to "Limits" diff --git a/docs/spec/pagination/pagination.examples.manual-switching-page.use-case.md b/docs/spec/pagination/pagination.examples.manual-switching-page.use-case.md new file mode 100644 index 0000000000..b4efe229b6 --- /dev/null +++ b/docs/spec/pagination/pagination.examples.manual-switching-page.use-case.md @@ -0,0 +1,21 @@ +8.2: Pagination manual switching page examples +============================================== + + **Primary Actor**: User + + **Scope**: Ngx-bootstrap DEMO / BS version 3&4 + + **Goal**: Show user manual switching page functionality + + Main success scenario: +---------------------- + + 1. User opens Pagination demo page + 2. User clicks on Basic sub-menu + 3. By default, active page is "4" + 4. After click on "Set current page to: 3" button, 3rd is active, previous chosen page is inactive + + Variations: + ---------- + + 2*. User scrolls to "Manual switching page" diff --git a/docs/spec/pagination/pagination.examples.page-changed-event.use-case.md b/docs/spec/pagination/pagination.examples.page-changed-event.use-case.md new file mode 100644 index 0000000000..4e4d7cf663 --- /dev/null +++ b/docs/spec/pagination/pagination.examples.page-changed-event.use-case.md @@ -0,0 +1,23 @@ +8.2: Pagination page changed event examples +============================================== + + **Primary Actor**: User + + **Scope**: Ngx-bootstrap DEMO / BS version 3&4 + + **Goal**: Show user page changed event functionality + + Main success scenario: +---------------------- + + 1. User opens Pagination demo page + 2. User clicks on Page changed event sub-menu + 3. By default, active page should be: 4 + 4. After click on 1st page, should shown event message "Page changed to: 1" + 5. After click on "Next" button, should shown event message "Page changed to: 2" + 6. After click on "Previous" button, should shown event message "Page changed to: 1" + + Variations: + ---------- + + 2*. User scrolls to "Page changed event" diff --git a/docs/spec/pagination/pagination.examples.pager.use-case.md b/docs/spec/pagination/pagination.examples.pager.use-case.md new file mode 100644 index 0000000000..29ccdf4de0 --- /dev/null +++ b/docs/spec/pagination/pagination.examples.pager.use-case.md @@ -0,0 +1,25 @@ +8.12: Pagination pager examples +============================== + + **Primary Actor**: User + + **Scope**: Ngx-bootstrap DEMO / BS version 3&4 + + **Goal**: Show user pager functionality + + Main success scenario: +---------------------- + + 1. User opens "Pagination" demo page + 2. User clicks on "Pager" sub-menu + 3. User sees two separate blocks: pagination and pager. + 4. When user clicks on last page, then next button is enabled, previous button is disabled, 1st page is inactive + and last is active + 5. After click on 2nd page, previous and next button are enabled, 2ng page is active, last page is inactive + 6. After click on 1st page, next button is enabled, previous button is disabled, last page is inactive + and last is active + + Variations: + ---------- + + 2*. User scrolls to "Pager" diff --git a/docs/spec/pagination/pagination.examples.pages-count-changed-event.use-case.md b/docs/spec/pagination/pagination.examples.pages-count-changed-event.use-case.md new file mode 100644 index 0000000000..03a1c64b9a --- /dev/null +++ b/docs/spec/pagination/pagination.examples.pages-count-changed-event.use-case.md @@ -0,0 +1,23 @@ +8.4: Pagination pages count changed event examples +============================================== + + **Primary Actor**: User + + **Scope**: Ngx-bootstrap DEMO / BS version 3&4 + + **Goal**: Show user pages count changed event functionality + + Main success scenario:F +---------------------- + + 1. User opens Pagination demo page + 2. User clicks on Page changed event sub-menu + 3. By default, active page should be: 4 + 4. After click on 1st page, should shown event message "The selected page no: 1/9" + 5. After click on "Next" button, should shown event message "The selected page no: 2/9" + 6. After click on "Previous" button, should shown event message "The selected page no: 1/9" + + Variations: + ---------- + + 2*. User scrolls to "Pages count changed event"