Document component contribution process

Author: Rumen Petrov

.storybook/preview.ts

@@ -12,7 +12,7 @@ const preview: Preview = {
       // https://storybook.js.org/docs/writing-stories/naming-components-and-hierarchy#sorting-stories
       storySort: {
         method: 'alphabetical',
-        order: ['Welcome', 'Foundations', ['Design principles', 'Design tokens'], 'Web', ['Get started', 'CSS variables', '*'], '*', 'Guides'],
+        order: ['Welcome', 'Foundations', ['Design principles', 'Design tokens'], 'Web', ['Get started', 'CSS variables', '*'], '*', 'Guides', 'Contribution'],
       },
     },
   },

README.md

@@ -24,15 +24,16 @@ Web is the main supported platform but the system allows easier extension with m
     * [x] Add some guides
   * [ ] Setup npm package and document how it should be used
   * [x] Auto deployment script
-  * [ ] Add component proposal template
-  * [ ] Develop at least one component form the MVP list
+  * [x] Add docs for at least one process - component contribution
+  * [ ] Develop at least one component from the MVP list by following a process
 
 * Phase Next
-  * [ ] Make it more engaging - colors, gradients, animations
-  * [ ] Make it Adaptive/Responsive
-  * [ ] Improve Accessibility
+  * [ ] Define and describe versioning
+  * [ ] More Design principles - Adaptive/Responsive/Accessibility
   * [ ] Setup Chromatic with CI
+  * [ ] Add metrics - e.g. accessibility threshold
   * [ ] Setup tests
+  * [ ] Make it more engaging - colors, gradients, animations
   * [ ] Light/dark theme
   * [ ] SSR components support
 

src/docs/component-contribution-process.mdx

@@ -0,0 +1,63 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="Contribution/Component" />
+
+# Component contribution process
+The contents of the Design System must be of a high quality and meet user needs. To guarantee this, all components need to meet certain criteria.
+
+### 1. Contribution criteria
+To be successful, proposals need to show that the component being suggested would be useful and unique.
+
+<table style={{ width: '100%' }}>
+  <thead>
+    <tr>
+      <th>Criteria</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><strong>Useful</strong></td>
+      <td>
+        <p>There is evidence that this component would be useful for many users.</p>
+        <p>Evidence could be screenshots or links to versions of it being used in different services.</p>
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Unique</strong></td>
+      <td>
+        <p>It does not replicate something already in the Design System.</p>
+        <p>If it’s intended to replace an existing component, there is evidence to show that it’s better than the existing version.</p>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+#### Contribution criteria checklist
+Start by opening an issue which should include information about the following points.
+
+* [ ] Component description
+* [ ] Potential use case examples
+* [ ] Visual appearance
+    * Set of requirements in text form
+    * (optional) Design
+* [ ] List of supported states - e.g. hover, focus, error, disabled, read-only...
+* [ ] Expected interface/properties/variants/types/forms
+* [ ] (optional) Responsiveness and adaptability - e.g. Expected breakpoints, resize behavior...
+* [ ] (optional) Other useful resources
+
+### 2. Criteria confirmation
+Admins review proposals to check they meet these criteria. Confirmed proposals are eligible for starting the development process.
+
+### 3. Development
+New branch is created from "main" and pull request is opened when the code is ready for review.
+
+#### Development checklist
+* [ ] The component itself and any other related logic
+* [ ] Provide stories which describe the component in details - e.g. states, interface, variants, examples...
+* [ ] Documentation page updates, if applicable
+
+### 4. Component confirmation
+Admin review the code and request more changes or approve the component.
+Approved components goes to the "Labs" section for some time until admins make sure everything is working as expected.
+Admins decide when to move them to the "Components" section.

src/docs/web-get-started.mdx

@@ -4,4 +4,4 @@ import { Meta } from "@storybook/blocks";
 
 # Get started
 
-TODO
+TBA