Skip to content

Commit

Permalink
feat(docs): add use-cases for carousel component (#4689)
Browse files Browse the repository at this point in the history
  • Loading branch information
ludmilanesvitiy authored and valorkin committed Oct 17, 2018
1 parent 07aced2 commit 2eeab60
Show file tree
Hide file tree
Showing 12 changed files with 242 additions and 0 deletions.
13 changes: 13 additions & 0 deletions docs/spec/carousel/carousel.examples.accessibility.use-case.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
3.11: Carousel Accessibility example
============================
**Primary Actor**: User

**Scope**: Ngx-bootstrap DEMO / BS version 3&4

**Goal**: Show user info about Accessibility

Main success scenario:
----------------------
1. User open Carousel demo page
2. User click on Accessibility sub-menu
3. User see info about "alt" attribute
20 changes: 20 additions & 0 deletions docs/spec/carousel/carousel.examples.basic.use-case.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
3.1: Carousel basic example
===========================
**Primary Actor**: User

**Scope**: Ngx-bootstrap DEMO / BS version 3&4

**Goal**: Show user basic carousel functionality

Main success scenario:
----------------------
1. User open Carousel demo page
2. User click on Basic sub-menu
3. User see carousel component with 3 slides and 2 arrows: left, right
4. When user click on left arrow - previous slide shown
5. When user click on right arrow - next slide shown
6. When user do nothing more than 5 sec - next slide automatically shown

Variations:
-----------
2*. User scroll to Basic sub-menu
21 changes: 21 additions & 0 deletions docs/spec/carousel/carousel.examples.config-defaults.use-case.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
3.3: Carousel Configuring defaults example
==========================================
**Primary Actor**: User

**Scope**: Ngx-bootstrap DEMO / BS version 3&4

**Goal**: Show user example of changing default parameters in carousel configuration

Main success scenario:
----------------------
1. User open Carousel demo page
2. User click on Configuring defaults sub-menu
3. User see carousel component with 3 slides and 2 arrows: left, right
4. When user click on left arrow - previous slide shown
5. When user click on right arrow - next slide shown
6. When user do nothing more than X miliseconds - next slide automatically shown
7. Component src should show example of usage: interval (X), noPause, showIndicators parameters

Variations:
-----------
2*. User scroll to Configuring defaults sub-menu
20 changes: 20 additions & 0 deletions docs/spec/carousel/carousel.examples.custom-content.use-case.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
3.6: Carousel Custom content example
===========================
**Primary Actor**: User

**Scope**: Ngx-bootstrap DEMO / BS version 3&4

**Goal**: Show user carousel example with custom content

Main success scenario:
----------------------
1. User open Carousel demo page
2. User click on Custom content sub-menu
3. User see carousel component with 3 slides and 2 arrows: left, right
4. User see info in each carousel slide: headers, info
5. When user click on left arrow - previous slide shown
6. When user click on right arrow - next slide shown

Variations:
-----------
2*. User scroll to Custom content sub-menu
20 changes: 20 additions & 0 deletions docs/spec/carousel/carousel.examples.disable-indicator.use-case.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
3.8: Carousel Disable indicator example
=======================================
**Primary Actor**: User

**Scope**: Ngx-bootstrap DEMO / BS version 3&4

**Goal**: Show user how to disable indicator of carousel and items inside

Main success scenario:
----------------------
1. User open Carousel demo page
2. User click on Disable indicator sub-menu
3. User see carousel component with 3 slides and 2 arrows: left, right and indicator
4. User able to click on "Enable/Disable Indicator" button
5. When user click on "Enable/Disable Indicator" - indicator disappeared
6. When user click on "Enable/Disable Indicator" again - indicator appeared

Variations:
-----------
2*. User scroll to Disable indicator sub-menu
20 changes: 20 additions & 0 deletions docs/spec/carousel/carousel.examples.disable-looping.use-case.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
3.7: Carousel Disable slide looping example
===========================================
**Primary Actor**: User

**Scope**: Ngx-bootstrap DEMO / BS version 3&4

**Goal**: Show user example with disabled looping functionality

Main success scenario:
----------------------
1. User open Carousel demo page
2. User click on Disable slide looping sub-menu
3. User see carousel component with 3 slides and 2 arrows: left, right
4. When user do nothing more than 5 sec - next slide automatically shown
5. When user click on checkbox "Disable Slide Looping", then no one slide should be shown after latest (Slide 2)
6. When user uncheck "Disable slide looping", then slides continue changing after 5 seconds

Variations:
-----------
2*. User scroll to Disable slide looping sub-menu
22 changes: 22 additions & 0 deletions docs/spec/carousel/carousel.examples.dynamic-slides.use-case.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
3.4: Carousel Dynamic Slides example
====================================
**Primary Actor**: User

**Scope**: Ngx-bootstrap DEMO / BS version 3&4

**Goal**: Show user carousel with dynamic generated slides

Main success scenario:
----------------------
1. User open Carousel demo page
2. User click on Dynamic Slides sub-menu
3. By default, user see carousel component with 4 slides and 2 arrows: left, right
4. User see 3 additional buttons: "Add Slide", "Remove Current", "Remove #3"
5. When user click on "Add Slide", then amount of slides increased at 1 and there should be appropriate header and info
4. When user click on "Remove Current", then amount of slides decreased at 1 and current slide should be deleted
5. When user click on "Remove #3" - then third slide deleted.
6. When user do nothing more than 5 sec - next slide automatically shown

Variations:
-----------
2*. User scroll to Dynamic Slides sub-menu
21 changes: 21 additions & 0 deletions docs/spec/carousel/carousel.examples.interval.use-case.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
3.9: Carousel interval example
==============================
**Primary Actor**: User

**Scope**: Ngx-bootstrap DEMO / BS version 3&4

**Goal**: Show user carousel functionality with possibilities to change time interval

Main success scenario:
----------------------
1. User open Carousel demo page
2. User click on Interval sub-menu
3. User see carousel component with 3 slides and 2 arrows: left, right
4. User see input with default interval: 1500 milliseconds
5. When user change the interval in input to any positive value - then slides change after added interval
6. When user change the interval in input to "0" - then slider stopped
7. When user change the interval in input to any negative value - then carousel stopped

Variations:
-----------
2*. User scroll to Interval sub-menu
21 changes: 21 additions & 0 deletions docs/spec/carousel/carousel.examples.optional-captions.use-case.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
3.2: Carousel Optional captions example
=======================================
**Primary Actor**: User

**Scope**: Ngx-bootstrap DEMO / BS version 3&4

**Goal**: Show user carousel with captions example

Main success scenario:
----------------------
1. User open Carousel demo page
2. User click on Optional captions sub-menu
3. User see carousel component with 3 slides and 2 arrows: left, right
4. User see header and info inside each slide
5. When user click on left arrow - previous slide and info shown
6. When user click on right arrow - next slide and info shown
7. When user do nothing more than 5 sec - next slide automatically shown with appropriate info inside

Variations:
-----------
2*. User scroll to Optional captions sub-menu
20 changes: 20 additions & 0 deletions docs/spec/carousel/carousel.examples.pause-on-hover.use-case.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
3.5: Carousel Pause on hover example
====================================
**Primary Actor**: User

**Scope**: Ngx-bootstrap DEMO / BS version 3&4

**Goal**: Show user example of carousel, which pause on hover

Main success scenario:
----------------------
1. User open Carousel demo page
2. User click on Pause on hover sub-menu
3. User see carousel component with 3 slides and 2 arrows: left, right
4. User see "Toggle pause on hover" button and able to click on it
5. When user click on "Toggle pause on hover" and move mouse to the slide - then after 5 seconds slide stay opened and don't change
6. When user click on "Toggle pause on hover" again, and move mouse to the slide - then after 5 seconds slide changed to other

Variations:
-----------
2*. User scroll to Pause on hover sub-menu
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
3.10: Carousel Slide changed event example
============================
**Primary Actor**: User

**Scope**: Ngx-bootstrap DEMO / BS version 3&4

**Goal**: Show user how to detect carousel events

Main success scenario:
----------------------
1. User open Carousel demo page
2. User click on Slide changed event sub-menus
3. User see carousel component with 3 slides and 2 arrows: left, right
4. User see carousel info: "Slide has been switched: 0"
5. When user click on left arrow - info changed to "Slide has been switched: 2"
6. When user click on left arrow again - info changed to "Slide has been switched: 1"
7. When user click on right arrow - info changed to "Slide has been switched: 2"
8. When user click on right arrow again - info changed to "Slide has been switched: 0"

Variations:
-----------
2*. User scroll to Slide changed event sub-menu
22 changes: 22 additions & 0 deletions docs/spec/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,28 @@

## Carousel

[Carousel. Basic](carousel/carousel.examples.basic.use-case.md)

[Carousel. Optional captions](carousel/carousel.examples.optional-captions.use-case.md)

[Carousel. Configuring defaults](carousel/carousel.examples.config-defaults.use-case.md)

[Carousel. Dynamic Slides](carousel/carousel.examples.dynamic-slides.use-case.md)

[Carousel. Pause on hover](carousel/carousel.examples.pause-on-hover.use-case.md)

[Carousel. Custom content](carousel/carousel.examples.custom-content.use-case.md)

[Carousel. Disable slide looping](carousel/carousel.examples.disable-looping.use-case.md)

[Carousel. Disable indicator](carousel/carousel.examples.disable-indicator.use-case.md)

[Carousel. Interval](carousel/carousel.examples.interval.use-case.md)

[Carousel. Slide changed event](carousel/carousel.examples.slide-changed-event.use-case.md)

[Carousel. Accessibility](carousel/carousel.examples.accessibility.use-case.md)

## Collapse

[Collapse. Basic](collapse/collapse.examples.basic.use-case.md)
Expand Down

0 comments on commit 2eeab60

Please sign in to comment.