Definition of Done

TEDI Components

Design

1. Component is designed using best practices
   • Component relies on TEDI variables (spacing, padding, colors, sizes etc) and styles (shadows, typography)
   • Semantic variables are created and used (new semantic variables are using base-variables)
   • Different component variants are created according to the needs
   • Component is tested with short and long texts
   • Component is tested in small and large device
   • Component is technically up to date according to new Figma features
   • Component has an informative badge if it's based on Veera
   • Component has an informative badge if it's variables are allowed to be changed manually
   • Component has an instruction section if there's something design specific other designers should know
2. Component has dark theme
3. Component has passed initial WCAG test in Figma
4. Component is responsive or adaptive
5. Pre-analysis of the component is documented in Confluence
6. The component is tested on designer(s) (Design review to design)
7. The design part of the component is documented in ZeroHeight with examples from Figma
8. Component is cross-linked
   • Figma link is added to Zeroheight
   • Zeroheight link is added to Figma
   • Storybook link is added to Figma
9. Component update is published to Figma libraries
10. The design is aligned with the developed component (Design Review to developed component)
    • If so then mark Figma component parameter Developed: No to Developed: Yes
    • Publish component update to Figma libraries
11. If the component replaces the Community component then add 'Deprecated' badge to the Community component (TBD if Community component will be removed from Figma after x time if there's no big visual differences)

Figma: https://www.figma.com/design/jWiRIXhHRxwVdMSimKX2FF/TEDI-Design-System-(draft)?m=auto

Development

1. The component is developed using best practices and conventions
2. The component should follow BEM guidelines
3. Storybook definitions are created for the component (at least everything that Figma has)
4. The component's API is documented for the developer
5. The component has unit-tests
6. Linter passes for component
7. CodeCov passes
8. The component has passed Chromatic
9. The component has passed design review
10. The component has passed code review
11. Development guidelines for the component are documented in ZeroHeight
12. External dependencies of the component are documented in Confluence
13. Semantic format is used for committing the component (semantic-release)
14. When using external libraries, they must comply with the validated open source licenses

Testing

1. The component has been manually WCAG tested
2. The component has been manually tested with:
   • Chrome
   • Safari
   • Firefox
   • Edge
3. Mobile devices
   • iPhone
   • Android
   • iPad
4. The component is tested on different screen sizes
5. WCAG guidelines for the component are documented in ZeroHeight

Validated open source component licences

TEDI will use only third party libs that uses following open source licenses:

• MIT: https://opensource.org/license/mit/
• Apache 2: https://opensource.org/license/apache-2-0/
• BSD 2: https://opensource.org/license/bsd-2-clause/
• BSD 3: https://opensource.org/license/bsd-3-clause/
• EUPL 1.2: https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12

Open Source Initiative license list: https://opensource.org/licenses/