Add Design System Components as WinForm Controls
- Dominant language
- JavaScript
- Stars
- 23
- Forks
- 62
- Avg merge
- 24m
- Merged PRs (30d)
- 1
Description
Currently the Scanning application uses the default Windows styling options.

Previous application screenshot

Very basic mockup of potential new styling
The government of B.C. has developed and released react based components for developers (and designers) to use. Because these components are currently only available for JavaScript Adding the necessary components in as WinForm controls will give a consistent feel between B.C. Government applications (web and desktop based). Design System Resources:
- Experiment with the components [StoryBook](https://designsystem.gov.bc.ca/react-components/)
- View the active code base [GitHub](https://github.com/bcgov/design-system/tree/main)
- Note that the repo is split between tokens and components
- View the packages on NPM
- [Tokens](https://www.npmjs.com/package/@bcgov/design-tokens)
- [Components](https://www.npmjs.com/package/@bcgov/design-system-react-components)
This resource can not be used for a WinForm application but the underlying components and tokens can be harvested and duplicated in C#. Focus should be on the components that will be used by the application.
DOD
- Attempt to match the B.C. Design System (as best as possible) in the following points
- Define tokens and 'source of truth'
- No undefined colours or numbers related to styling in the application
- Create components
- Button (Primary, Secondary, Tertiary)
- Text Field (single and multi-line)
- Label (in B.C. Design System as an element of the Text Field but that does not work with WinForms)
- Radio/ checkbox groups/ switch
- Optional Number Field for `lblDisplayImage`
- Use the above components in the Scanning Application
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.