feat(docs): add use-cases for rating component (#4745)

docs/spec/index.md

@@ -182,6 +182,15 @@
 
 ## Rating
 
+[Rating. Basic rating](rating/rating.examples.basic.use-case.md)
+
+[Rating. Dynamic rating](rating/rating.examples.dynamic.use-case.md)
+
+[Rating. Custom icons](rating/rating.examples.custom-icons.use-case.md)
+
+[Rating. Select on enter](rating/rating.examples.select-on-enter.use-case.md)
+
+
 ## Sortable
 
 ## Tabs

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

@@ -0,0 +1,18 @@
+11.1: Rating basic example
+==========================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user basic rating functionality
+
+Main success scenario:
+----------------------
+1. User opens Rating demo page
+2. User clicks on Basic rating sub-menu
+3. User see rating with 10 stars and card with "Rate: N" text
+4. First N stars should be selected and 10-N not selected
+
+Variations:
+-----------
+2*. User scroll to Basic rating sub-menu

docs/spec/rating/rating.examples.custom-icons.use-case.md

@@ -0,0 +1,20 @@
+11.3: Rating Custom icons example
+=================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user rating with custom icons
+
+Main success scenario:
+----------------------
+1. User opens Rating demo page
+2. User clicks on Custom icons sub-menu
+3. User see 2 ratings
+4. First rating view should be with 10 squares and amount selected stars should be in text near rating "(Rate: N)"
+5. Second rating view should be with 10 stars and amount selected stars should be in text near rating "(Rate: N)"
+6. When user change mark in each rating, then rating updated and text near it - also
+
+Variations:
+-----------
+2*. User scroll to Custom icons sub-menu

docs/spec/rating/rating.examples.dynamic.use-case.md

@@ -0,0 +1,28 @@
+11.2: Rating dynamic example
+============================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user dynamic rating functionality
+
+Main success scenario:
+----------------------
+1. User opens Rating demo page
+2. User clicks on Dynamic rating sub-menu
+3. User see rating with 10 stars and card with "Rate: N, Readonly is: false;  Hovering over: none" text
+4. User see 2 clickable buttons "Clear" and "Toggle Readonly"
+5. First N stars should be selected and 10-N not selected
+6. When user move mouse to any other start from N (Y), then test in card changed with "Hovering over: Y" and percentage block shown with "Y*10%" text
+7. When user clicks on any star (different from selected), then card info updated with this new number
+8. When user clicks "Clear", then all stars become unselected and card text is "Rate: 0;  Readonly is: false;  Hovering over: none"
+9. When user clicks on any star, then rating and card text updated again
+10. When user clicks on "Toggle Readonly", then card text updated with "Readonly is: true" and button "Clear" became unclickable
+11. When user clicks on any star in the rating, nothing happens
+12. When user clicks on "Toggle Readonly" again, then button "Clear" became clickable and card text updated with "Readonly is: false"
+13. When user clicks on any star, then rating and card text updated again
+
+
+Variations:
+-----------
+2*. User scroll to Dynamic rating sub-menu

docs/spec/rating/rating.examples.select-on-enter.use-case.md

@@ -0,0 +1,23 @@
+11.4: Rating Select on enter example
+====================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user rating with key navigation (with arrows and enter)
+
+Main success scenario:
+----------------------
+1. User opens Rating demo page
+2. User clicks on Select on enter sub-menu
+3. User see rating card with info "Rating: N;  Readonly is: false;" and clickable button "Reset rating and status"
+4. When user change the mark, then rating changed with appropriate info in the card
+5. When user focus on the rating, then after press "right arrow" on the keyboard, rating value increased at 1
+6. When user press "left arrow" on the keyboard, rating value decreased at 1
+7. When user press "Enter" on the keyboard, then rating saved this state and card info updated with "Rating: N;  Readonly is: true;"
+8. When user clicks on "Reset rating and status", then all stars in rating become unselected and card text become "Rating: 0;  Readonly is: false;"
+9. When user change the mark, then rating changed with appropriate info in the card
+
+Variations:
+-----------
+2*. User scroll to Select on enter sub-menu