Skip to content

Commit 07aced2

Browse files
ludmilanesvitiyvalorkin
ludmilanesvitiy
authored and
valorkin
committed
feat(docs): add use-cases for buttons component (#4686)
1 parent 5f535c6 commit 07aced2

9 files changed

+179
-0
lines changed

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
2.1: Buttons Basic example
2+
==========================
3+
**Primary Actor**: User
4+
5+
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
6+
7+
**Goal**: Show user basic buttons example
8+
9+
Main success scenario:
10+
----------------------
11+
1. User opens Buttons demo page
12+
2. User clicks on Basic sub-menu
13+
3. User see 1 button with text: "Single Button"
14+
4. Button should be clickable
15+
16+
Variations:
17+
-----------
18+
2*. User scrolls to Basic sub-menu

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
2.2: Buttons Checkbox example
2+
=============================
3+
**Primary Actor**: User
4+
5+
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
6+
7+
**Goal**: Show user checkbox-like buttons example
8+
9+
Main success scenario:
10+
----------------------
11+
1. User opens Buttons demo page
12+
2. User clicks on Checkbox sub-menu
13+
3. User see button-group, contain of 3 parts(labels)
14+
4. By default, 1st button is inactive, 2d - active and 3d - inactive
15+
5. User able to click on each button
16+
6. When user clicks on the inactive button, it become active
17+
7. User can make all buttons inactive and can make all buttons active
18+
19+
Variations:
20+
-----------
21+
2*. User scrolls to Checkbox sub-menu

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
2.3: Buttons Custom checkbox value example
2+
==========================================
3+
**Primary Actor**: User
4+
5+
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
6+
7+
**Goal**: Show user button example with custom checkbox value
8+
9+
Main success scenario:
10+
----------------------
11+
1. User opens Buttons demo page
12+
2. User clicks on Custom checkbox value sub-menu
13+
3. User see 1 clickable button with text: "Single Toggle" and "1" in the custom checkbox value field
14+
4. Button should be active by default
15+
5. When user clicks on it, button become inactive and custom checkbox value should be "0"
16+
17+
Variations:
18+
-----------
19+
2*. User scrolls to Custom checkbox value sub-menu

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
2.8: Buttons Disabled example
2+
=============================
3+
**Primary Actor**: User
4+
5+
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
6+
7+
**Goal**: Show user disabled buttons example
8+
9+
Main success scenario:
10+
----------------------
11+
1. User opens Buttons demo page
12+
2. User clicks on Disabled Buttons sub-menu
13+
3. User see 2 buttons: "Button", "Enable/Disable" and able to click on each
14+
4. By default, "Button" is enabled
15+
5. When user clicks on "Enable/Disable", "Button" become disabled and unclickable
16+
6. When user clicks on "Enable/Disable" second time, "Button" become enabled and clickable
17+
18+
Variations:
19+
-----------
20+
2*. User scrolls to Disabled Buttons sub-menu

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

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

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

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

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

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

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
2.6: Buttons Uncheckable Radio example
2+
======================================
3+
**Primary Actor**: User
4+
5+
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
6+
7+
**Goal**: Show user uncheckable radio buttons example
8+
9+
Main success scenario:
10+
----------------------
11+
1. User opens Buttons demo page
12+
2. User clicks on Uncheckable Radio sub-menu
13+
3. User see button-group, which contain of 3 parts(labels)
14+
4. By default, in each group, 1st button is inactive, 2d - active and 3d - inactive
15+
5. User able to click on each button
16+
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)
17+
7. When 1 button is active, other is inactive.
18+
19+
Variations:
20+
-----------
21+
2*. User scrolls to Uncheckable Radio sub-menu

‎docs/spec/index.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,22 @@
77

88
## Buttons
99

10+
[Buttons examples. Basic](buttons/buttons.examples.basic.use-case.md)
11+
12+
[Buttons examples. Checkbox](buttons/buttons.examples.checkbox.use-case.md)
13+
14+
[Buttons examples. Custom checkbox value](buttons/buttons.examples.custom-checkbox.use-case.md)
15+
16+
[Buttons examples. Checkbox with Reactive Forms](/buttons/buttons.examples.reactive-checkbox.use-case.md)
17+
18+
[Buttons examples. Radio](buttons/buttons.examples.radio.use-case.md)
19+
20+
[Buttons examples. Uncheckable Radio](buttons/buttons.examples.uncheckable-radio.use-case.md)
21+
22+
[Buttons examples. Radio with Reactive Forms](buttons/buttons.examples.reactive-radio.use-case.md)
23+
24+
[Buttons examples. Disabled Buttons](dbuttons/buttons.examples.disabled-buttons.use-case.md)
25+
1026

1127
## Carousel
1228

0 commit comments

Comments
 (0)