Contribute

1. Share your idea or suggestion with us at Design System Drop-in hours Book a time
   Be prepared to:
   • Explain your project goals
   • Share what options and iterations were explored with and without the Design System components
2. We will evaluate the contribution against the design system contribution criteria.
3. Once approved, the item will be added to the Design System's backlog. As work commences, we will collaborate with the team that made the request to ensure the component meets their specific needs.

Criteria for being part of the design system

Useful

There is evidence that this component or pattern would be useful for many teams or services. Evidence could be screenshots or links to versions of it being used in different services.

Unique

It does not replicate something already in the Design System.
If it's intended to replace an existing component or pattern, there is evidence to show that it's better than the existing version.

Good user experience

It creates a more accessible, usable, and simpler experience for the user. The user has a greater understanding and consent to what they are doing.
It should be informed by research to show that it improves user experience and is responding to a user need.

Universal

It is inclusive and accessible.
It should meet or exceed accessible standards.
WCAG 2.1

Code contribution process

The recommended type of code contributions to the design system are viewed as minor, such as:

• bug fixes,
• documentation updates; or
• enhancements to existing components.

Major contributions such as new components or patterns are discouraged due to the complexity and need for our team's involvement.

How to contribute through GitHub

Step one: Reach out on the design system support channel to let us know you’re interested in contributing.

1. Find an issue in our backlog tagged with “ready-for-contribution”. Let us know which issue(s) you’re picking up.

1. Go to ui-components page and choose the “Fork” link in the top-right of the page
2. Create a Fork, choose an owner and a repo name
   • Make sure you're forking our repo and not directly cloning our repo
3. Clone the newly created repo
4. Open the repo’s folder in your IDE
5. Run the following commands in order:
   1. npm i
   2. run a bash script ./playground-setup.sh
   3. npm run build
6. The commands above will create a "playground" folder containing both React and Angular environments. Since nothing in this folder is committed to the repository, you can freely make any changes you want. These environments are designed for testing purposes.
7. Use the following commands to run your playground environments:
   1. Angular: npm run dev:angular
   2. React: npm run dev:react

Where to find React and Web wrappers

React wrappers: /libs/react-components/src/lib. Each folder represents a single component with its associated unit tests and wrapper code

Web wrappers: /libs/web-components/src/components. Each folder represents a single component with:

• Unit tests as *.spec.ts
• Component code as *.ts
• Documentation as doc.md 

Testing procedures

All unit tests must be written in Svelte.

• If you're updating/modifying React wrappers, you will need to write unit tests in React
• Manually test in React and Angular

Additionally, our QA automation developer will perform a comprehensive series of tests to ensure the components' quality and functionality.

Submitting your code

Submit your code in a pull request to the alpha branch from your forked repository, include the following as a title:

• Bug fix: fix(#storyNumber): short description of issue fixed (7 words max)
• Feature request: feat(#storyNumber): short description of feature (7 words max)

Make sure you mark the PR as a draft.