# Styling Stories and Test Cases

## [As a user, I want my application to live in a styled environment](styling_todomvc_app)

* TodoApp component

## [As a user, I want my TodoApp component to be styled](styling_todoapp_component)

* Should be styled correctly
  * Should have div styling applied in accordance with the design specs

## [As a user, I want my Header component to be styled](styling_header_component)

* Should be styled correctly
  * Should have header styling applied in accordance with the design specs
  * Should have h1 styling applied in accordance with the design specs
  * Should have checkbox styling applied in accordance with the design specs
* Should render correctly
  * Should have a toggle all complete status span
* Should be styled correctly
  * Should have span styling applied in accordance with the design specs

## [As a user, I want my TodoTextInput component to be styled](styling_todotextinput_component)

* Should be styled correctly
  * Should have new todo styling applied in accordance with the design specs
  * Should have edit todo styling applied in accordance with the design specs

## [As a user, I want my MainSection component to be styled](styling_mainsection_component)

* MainSection
* Should be styled correctly
  * Should have styling decoration applied in accordance with the design specs
  * Should have section styling applied in accordance with the design specs
  * Should have ul styling applied in accordance with the design specs
  * Should have radiobuttons styling applied in accordance with the design specs

## [As a user, I want my TodoItem component to be styled](styling_todoitem_component)

* TodoItem
* Should be styled correctly
  * Should have li styling applied in accordance with the design specs
  * Should have ButtonChecked styling applied in accordance with the design specs
  * Should have ButtonUnchecked styling applied in accordance with the design specs
  * Should have label not completed styling applied in accordance with the design specs
  * Should have label completed styling applied in accordance with the design specs
  * Should have delete div styling applied in accordance with the design specs
  * Should not display delete div initially
* Should behave correctly
  * Should display delete div only when hovering over a todo

## [As a user, I want my Footer component to be styled](styling_footer_component)

* Should be styled correctly
  * Should have footer styling applied in accordance with the design specs
  * Should have number of not completed todos in bold
  * Should have delete button styling applied in accordance with the design specs
  * Should have delete button hover styling applied in accordance with the design specs
