Toggle icon

[DanGenuardi]

Problem Statement

• We created a new data toggle for the usage page to enable and disable data within their plan.

Recommendation

• add data toggle icon into the TDS library for future use for any team.

Designs

• The data toggle is already coded from the Nutella team.
• Screenshots
  Enabled: https://telus.invisionapp.com/d/main#/console/13507983/281885578/preview
  Disabled: https://telus.invisionapp.com/d/main#/console/13507983/283301249/preview
  

Meta

• Willing to design solution: Yes/No
• Willing to develop solution: Yes/No
• Has workaround: Yes/No
• Do any similar components already exist: Yes/No
• Does this pattern exist already but isn’t a community component? (include url)
• Which teams/applications do you think would use this improvement?
• High impact: Yes/No

[jesdavpet]

While developing this component, will keep it stateless for maximum flexibility, as per issue: telus/tds-core#736

If a stateful version is required in the future, it should be relatively simple to wrap the stateless version and provide internal state management in that way.

[jesdavpet]

@DanGenuardi Are there component level designs illustrating the disabled state (as in not clickable) and / or error state?

I'm considering this component to basically be a form checkbox, in @tds/core-checkbox the concept of an error message and disabled state are encapsulated with the checkbox component.

Is that part of the current design(s) for this, or a future addition?
CC: @lucylist @Berjesty

[DanGenuardi]

@jesdavpet there isn't a disabled state where it isn't clickable with the toggle in the design. But we have a design where the data access is blocked. Please view this invision link for reference. https://telus.invisionapp.com/d/main#/console/13507983/288289626/preview

[jesdavpet]

OK, thanks for the follow up @DanGenuardi

So when the customer is not allowed to click the toggle, currently you're just conditionally displaying a blocked icon & message instead of the toggle ... so, I'll just leave that part out.

Is there an error state, with an error message in the designs, like this example ("Mobility" checkbox has a pink box with error text above it, pictured below):

[DanGenuardi]

@jesdavpet for the toggle? no we don't.

[jesdavpet]

for the toggle? no we don't.

Cool, thanks for clarifying @DanGenuardi ! I'm just leaving that out for now then ... can be added later if/when there's a need.

[theetrain]

This component has been released: @tds/community-toggle-switch@1.0.0

[Berjesty]

This component is now available for everyone on DSM -> TDS Community -> Components Coded -> Toggle @theetrain

[varunj90]

assignees have been added on closed issue to reflect power level (points) on community heroes board (coming soon!)