Create component - Pin code input

Description

As a user of the library
I want to be able to use the component pin code input
So that I can add configurable pin code input in my own projects

As a user of the library
I want to be able to use the component
So that I have access to the documentation on how to use it

As a user of the demo
I want to access the component
So that I can understand how to use it:

• while using the demo I can interact with the available options and observe the changes on the component itself
• I can see the code associated to the component customization
• I can copy and paste the code from the app based on the selected customization
• or when looking into the code of the app itself, I would also understand how to use it

Design guidelines

unified-design-system.orange.com

Context

The component is described in the Figma board, and is available in version v1.2.0

Definition of Ready

To be defined

Definition of Done

Properties to manage

• Outlined
• Rounded corner
• Length
• Error
• Helper text (bool)
• Helper text (4 digit code) (text)
• Helper text (6 digit code) (text)
• Helper text (8 digit code) (text)

Others

• Implementement Initial settings
• Update tests
• Update documentation
• Update demo

Start by reviewing the component description in the Figma board and the linked Orange Unified Design System guidelines. Use the existing library, tests, documentation, and demo patterns as entry points, since no specific files are named. Done means the listed properties are supported, tests are updated, documentation explains usage, and the demo exposes customization and copyable code.