# Medium contribution spec

### Component overview

<table data-full-width="false"><thead><tr><th width="411">Field</th><th>Description</th></tr></thead><tbody><tr><td><strong>Component name</strong></td><td>[Insert Component Name]</td></tr><tr><td><strong>Type</strong></td><td>[Atom, Molecule, Organism, etc.]</td></tr><tr><td><strong>Intended purpose</strong></td><td>Provide a detailed explanation of the component’s purpose (e.g., "To extend the functionality of the form field component to support file uploads.")</td></tr><tr><td><strong>Primary use case</strong></td><td>[Define primary scenarios.]</td></tr><tr><td><strong>Secondary use case</strong></td><td>[Optional, additional scenarios where it could be applied.]</td></tr></tbody></table>

### Existing patterns/components

<table data-full-width="false"><thead><tr><th width="410">Field</th><th>Description</th></tr></thead><tbody><tr><td><strong>Do any existing patterns fulfill this need?</strong></td><td>[Yes/No. If yes, reference the relevant pattern.]</td></tr></tbody></table>

### References and inspiration

<table><thead><tr><th width="410">Field</th><th>Description</th></tr></thead><tbody><tr><td><strong>Description of component</strong></td><td>[Provide background on how the component was conceived.]</td></tr><tr><td><strong>References/inspiration sources</strong></td><td>[Provide links or files (e.g., Figma, mockups).]</td></tr></tbody></table>

### Interactions and behaviours

<table data-full-width="false"><thead><tr><th width="409">Field</th><th>Description</th></tr></thead><tbody><tr><td><strong>Intended user interactions</strong></td><td>[Describe expected interactions (e.g., "Multi-step form progress displayed dynamically.")]</td></tr><tr><td><strong>Expected component behaviour</strong></td><td>[Define behaviour in various contexts (e.g., loading states, user errors).]</td></tr></tbody></table>

### Accessibility considerations

<table data-full-width="false"><thead><tr><th width="406">Field</th><th>Description</th></tr></thead><tbody><tr><td><strong>WCAG compliance level</strong></td><td>[A, AA]</td></tr><tr><td><strong>Expected component behaviour (accessibility)</strong></td><td>[Outline required accessible interactions and considerations.]</td></tr><tr><td><strong>Potential accessibility challenges</strong></td><td>[List known challenges or risks.]</td></tr></tbody></table>

### User research

<table data-full-width="false"><thead><tr><th width="403">Field</th><th>Description</th></tr></thead><tbody><tr><td><strong>Research completed</strong></td><td>[Provide key research insights. If possible, show how these insights influenced the component.]</td></tr><tr><td><strong>Results</strong></td><td>[Link to additional resources, if any.]</td></tr></tbody></table>

### Security requirements

<table data-full-width="false"><thead><tr><th width="401">Field</th><th>Description</th></tr></thead><tbody><tr><td><strong>Security considerations</strong></td><td>[List any potential risks, such as user input or data handling.]</td></tr><tr><td><strong>Data handling requirements</strong></td><td>[Describe if the component interacts with user data.]</td></tr><tr><td><strong>Privacy concerns</strong></td><td>[List any privacy risks, if applicable.]</td></tr></tbody></table>

### Technical considerations

| Field                                     | Description                                                                         |
| ----------------------------------------- | ----------------------------------------------------------------------------------- |
| **Required technology/framework support** | \[e.g., Drupal, React, Vue.js]                                                      |
| **Known component dependencies**          | \[List dependencies, if any.]                                                       |
| **Performance expectations**              | \[Specify performance goals or requirements (e.g., loading speed, responsiveness).] |

### Submission details

<table data-full-width="false"><thead><tr><th width="405">Field</th><th>Description</th></tr></thead><tbody><tr><td><strong>Submitted by</strong></td><td>[Contributor's name]</td></tr><tr><td><strong>Date</strong></td><td>[Submission date]</td></tr><tr><td><strong>Contact information</strong></td><td>[Name, email or GitHub username]</td></tr></tbody></table>

***

## Feedback

We're always looking at ways to improve our model for contributions, and rely on your feedback to ensure an enjoyable contribution experience. The best way to give us feedback is to join our [Slack channel ](https://drupal.slack.com/archives/C039UV0CQBZ)and chat to us there, or contact us via [email](mailto:support@civictheme.io)!