feat(docs): add use-cases for progressbar component (#4744)

docs/spec/index.md

@@ -171,6 +171,15 @@
 
 ## Progressbar
 
+[Progressbar. Static](progressbar/progressbar.examples.static.use-case.md)
+
+[Progressbar. Dynamic](progressbar/progressbar.examples.dynamic.use-case.md)
+
+[Progressbar. Stacked](progressbar/progressbar.examples.stacked.use-case.md)
+
+[Progressbar. Configuring defaults](progressbar/progressbar.examples.config-default.use-case.md)
+
+
 ## Rating
 
 ## Sortable

docs/spec/progressbar/progressbar.examples.config-default.use-case.md

@@ -0,0 +1,18 @@
+10.4: Progressbar configuring defaults example
+==============================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user how to configure defaults of progressbar
+
+Main success scenario:
+----------------------
+1. User open Progressbar demo page
+2. User click on Configuring defaults sub-menu
+3. User see 1 progressbar with specific value and type as in Template src
+4. Component src should be written with ProgressbarConfig
+
+Variations:
+-----------
+2*. User scroll to Configuring defaults sub-menu

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

@@ -0,0 +1,26 @@
+10.2: Progressbar dynamic example
+=================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user dynamic progressbar example
+
+Main success scenario:
+----------------------
+1. User open Progressbar demo page
+2. User click on Dynamic sub-menu
+3. User see 3 progressbars with [value]="dynamic" and "Randomize" button
+4. First should be default, second - type="success" and third - type depend on value
+5. When user click "Randomize", then value of each progressbar changed
+6. If value of third progressbar >= 25 && < 50, then text "info" shown
+
+Extentions:
+-----------
+6*. If value of third progressbar >= 50 && < 75, then text "warning" shown
+6**. If value of third progressbar < 25, then text "success" shown
+6***. If value of third progressbar >= 75, then text "danger" shown
+
+Variations:
+-----------
+2*. User scroll to Dynamic sub-menu

docs/spec/progressbar/progressbar.examples.stacked.use-case.md

@@ -0,0 +1,23 @@
+10.3: Progressbar stacked example
+=================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user stacked progressbar example
+
+Main success scenario:
+----------------------
+1. User open Progressbar demo page
+2. User click on Stacked sub-menu
+3. User see 1 progressbar with 4 bars inside and "Randomize" button
+4. When user click "Randomize", then value of each bar changed
+5. Each bar should have appropriate percentage
+
+Extentions:
+-----------
+4*. When user click "Randomize", then amount of bars inside could be less than 4
+
+Variations:
+-----------
+2*. User scroll to Stacked sub-menu

docs/spec/progressbar/progressbar.examples.static.use-case.md

@@ -0,0 +1,20 @@
+10.1: Progressbar static example
+================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user static progressbar example
+
+Main success scenario:
+----------------------
+1. User open Progressbar demo page
+2. User click on Static sub-menu
+3. User see 3 progressbars
+4. Current progressbar value matches value from template src
+5. Second progressbar should be with type="warning"
+5. Third progressbar should be with type="danger" and with animation
+
+Variations:
+-----------
+2*. User scroll to Static sub-menu