feat(docs): add use-cases for buttons component (#4686)

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

@@ -0,0 +1,18 @@
+2.1: Buttons Basic example
+==========================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user basic buttons example
+
+Main success scenario:
+----------------------
+1. User opens Buttons demo page
+2. User clicks on Basic sub-menu
+3. User see 1 button with text: "Single Button"
+4. Button should be clickable
+
+Variations:
+-----------
+2*. User scrolls to Basic sub-menu

docs/spec/buttons/buttons.examples.checkbox.use-case.md

@@ -0,0 +1,21 @@
+2.2: Buttons Checkbox example
+=============================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user checkbox-like buttons example
+
+Main success scenario:
+----------------------
+1. User opens Buttons demo page
+2. User clicks on Checkbox sub-menu
+3. User see button-group, contain of 3 parts(labels)
+4. By default, 1st button is inactive, 2d - active and 3d - inactive
+5. User able to click on each button
+6. When user clicks on the inactive button, it become active
+7. User can make all buttons inactive and can make all buttons active
+
+Variations:
+-----------
+2*. User scrolls to Checkbox sub-menu

docs/spec/buttons/buttons.examples.custom-checkbox.use-case.md

@@ -0,0 +1,19 @@
+2.3: Buttons Custom checkbox value example
+==========================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user button example with custom checkbox value
+
+Main success scenario:
+----------------------
+1. User opens Buttons demo page
+2. User clicks on Custom checkbox value sub-menu
+3. User see 1 clickable button with text: "Single Toggle" and "1" in the custom checkbox value field
+4. Button should be active by default
+5. When user clicks on it, button become inactive and custom checkbox value should be "0"
+
+Variations:
+-----------
+2*. User scrolls to Custom checkbox value sub-menu

docs/spec/buttons/buttons.examples.disabled-buttons.use-case.md

@@ -0,0 +1,20 @@
+2.8: Buttons Disabled example
+=============================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user disabled buttons example
+
+Main success scenario:
+----------------------
+1. User opens Buttons demo page
+2. User clicks on Disabled Buttons sub-menu
+3. User see 2 buttons: "Button", "Enable/Disable" and able to click on each
+4. By default, "Button" is enabled
+5. When user clicks on "Enable/Disable", "Button" become disabled and unclickable
+6. When user clicks on "Enable/Disable" second time, "Button" become enabled and clickable
+
+Variations:
+-----------
+2*. User scrolls to Disabled Buttons sub-menu

docs/spec/buttons/buttons.examples.radio.use-case.md

@@ -0,0 +1,21 @@
+2.5: Buttons Radio example
+==========================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user radio-buttons usage example with checked/unchecked states
+
+Main success scenario:
+----------------------
+1. User opens Buttons demo page
+2. User clicks on Radio sub-menu
+3. User see 2 button-groups (primary and success), contain of 3 parts(labels)
+4. By default, in each group, 1st button is inactive, 2d - active and 3d - inactive
+5. User able to click on each button
+6. When user clicks on the inactive button, it become active and other buttons in this group become inactive
+7. Click on N(Left, Middle, Right) button in A group make all N buttons active in all groups
+
+Variations:
+-----------
+2*. User scrolls to Radio sub-menu

docs/spec/buttons/buttons.examples.reactive-checkbox.use-case.md

@@ -0,0 +1,22 @@
+2.4: Buttons Checkbox with Reactive Forms example
+=================================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user checkbox-like buttons example with Reactive Forms
+
+Main success scenario:
+----------------------
+1. User opens Buttons demo page
+2. User clicks on Checkbox with Reactive Forms sub-menu
+3. User see button-group, contain of 3 parts(labels)
+4. By default, 1st button is inactive, 2d - active and 3d - inactive
+5. User able to click on each button
+6. When user clicks on the inactive button, it become active
+7. User can make all buttons inactive and can make all buttons active
+8. Component src should be written with usage of FormBuilder and FormGroup
+
+Variations:
+-----------
+2*. User scrolls to Checkbox with Reactive Forms sub-menu

docs/spec/buttons/buttons.examples.reactive-radio.use-case.md

@@ -0,0 +1,21 @@
+2.7: Buttons Radio with Reactive Forms example
+==============================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user example of radio buttons with ReactiveForms
+
+Main success scenario:
+----------------------
+1. User opens Buttons demo page
+2. User clicks on Radio with Reactive Forms sub-menu
+3. User see button-group, which contain of 3 parts(labels)
+4. By default, 1st button is inactive, 2d - inactive and 3d - active
+5. User able to click on each button
+6. When user clicks on the inactive button, it become active and other buttons - inactive
+7. Component src should be written with usage of FormBuilder and FormGroup
+
+Variations:
+-----------
+2*. User scrolls to Radio with Reactive Forms sub-menu

docs/spec/buttons/buttons.examples.uncheckable-radio.use-case.md

@@ -0,0 +1,21 @@
+2.6: Buttons Uncheckable Radio example
+======================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user uncheckable radio buttons example
+
+Main success scenario:
+----------------------
+1. User opens Buttons demo page
+2. User clicks on Uncheckable Radio sub-menu
+3. User see button-group, which contain of 3 parts(labels)
+4. By default, in each group, 1st button is inactive, 2d - active and 3d - inactive
+5. User able to click on each button
+6. When user clicks on the active button, it become inactive and other buttons stay inactive (and there is "Null" message in this demo block)
+7. When 1 button is active, other is inactive.
+
+Variations:
+-----------
+2*. User scrolls to Uncheckable Radio sub-menu

docs/spec/index.md

@@ -7,6 +7,22 @@
 
 ## Buttons
 
+[Buttons examples. Basic](buttons/buttons.examples.basic.use-case.md)
+
+[Buttons examples. Checkbox](buttons/buttons.examples.checkbox.use-case.md)
+
+[Buttons examples. Custom checkbox value](buttons/buttons.examples.custom-checkbox.use-case.md)
+
+[Buttons examples. Checkbox with Reactive Forms](/buttons/buttons.examples.reactive-checkbox.use-case.md)
+
+[Buttons examples. Radio](buttons/buttons.examples.radio.use-case.md)
+
+[Buttons examples. Uncheckable Radio](buttons/buttons.examples.uncheckable-radio.use-case.md)
+
+[Buttons examples. Radio with Reactive Forms](buttons/buttons.examples.reactive-radio.use-case.md)
+
+[Buttons examples. Disabled Buttons](dbuttons/buttons.examples.disabled-buttons.use-case.md)
+
 
 ## Carousel