feat(docs): added use-cases for pagination component (#4684)

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
+

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"