Skip to content

Switch Specification

Jump to bottom
Silvia Ivanova edited this page Jul 16, 2021 · 9 revisions

Switch Specification

Contents

  1. Overview
  2. User Stories
  3. Functionality
  4. Test Scenarios
  5. Accessibility
  6. Assumptions and Limitations
  7. References

Owned by

Team Name: Design and Web Development (DnD)

Developer: Silvia Ivanova

Designer: Stefan Ivanov

Requires approval from

  • Simeon Simeonov | Date:

Signed off by

  • Product Owner: Radoslav Mirchev | Date:
  • Radoslav Karaivanov | Date:

Revision History

Version Users Date Notes
1 Silvia Ivanova Date 16 July 2021 Update specification

1. Overview

The <igc-switch> component is used to provide a capability for making a binary choice of a single settings option.

Objectives

It is providing API for the most common use cases when it comes to a binary choice for a certain condition. Switch takes on common visual properties of the radio button.

Acceptance criteria

  1. The switch component should have a toggle visual representation.
  2. The switch component should have a clickable button.
  3. The switch component should have the ability to add a corresponding label (before or after).

2. User Stories

Developer stories:

  • Story 1: As a developer, I want to be able to provide a way to display a binary choice - true or false.
  • Story 2: As a developer, I want to be able to specify the default state of the switch - checked or unchecked.
  • Story 3: As a developer, I want to be able to disable the switch.
  • Story 4: As a developer, I want to be able to add a corresponding label - before or after the switch.
  • Story 5: As a developer, I want to be able to customize the switch size and colors.
<igc-switch checked="true" disabled="true" labelPosition="before">
Checked Switch
</igc-switch>

End-user stories:

  • Story 1: As an end-user, I want to be shown a visual representation of certain state changes.

3. Functionality

3.1. End-User Experience

The switch component should display a toggle changing the state of a single settings option. It comes with 3 different states (checked, unchecked, and disabled) and a corresponding label.

3.2. Developer Experience

checked: Determines the initial state of the switch to checked="true".

disabled: Determines whether the switch is enabled or disabled.

3.5. API

Properties

You should be able to configure the igc-switch by setting properties on it.

Name Description Type Default value Reflected
checked Determines the initial state of the switch boolean false false
disabled Determines the accessibility state of the switch boolean false false

Events

Slots

Name Description
(default)

CSS Parts

Name Description
base The base wrapper of the switch.

4. Test Scenarios

Automation

  • Scenario 1:

5. Accessibility

Clone this wiki locally