Definition of Done & Guidelines

High-Level DoD of a Component

• UX and Design inline with DDB workstreams
• Code Complete
• Tested
• Documented
• Released

Code Complete DOD

• Data Model is Accurate
• Acessibility Standards are met
• Works with Dark Theme (not yet avialable)
• Works in Compact mode
• Localiation/Internationalization Support

Testing DoD

• SCSS linted (nothing in place yet)
• Markup??? (nothing in place yet)
• Visual regression tests passed (BackStop JS POC)

Documentation DoD

• Docs page follows DDB controls workstream structure
• Free of typos
• Does not have any broken links

---

Guidelines

Component UX/Visual

UX

• Align and reuse the concepts from the applicable workstream specifications if applicable
• Ensure requirements are aligned with all known stakeholders
• Ensure that is an existing component can be used as a part of the new component, it is referenced and used as part of that component/group (i.e. toolbar)
• One option does not fit all applications. Offer options that accommodate both simple and complex situations (i.e. a lot of data versus a small amount of data, long forms v short forms)
• Wireframes will include states (where applicable)
• Include complete documentation based on specifications. These include:
  • Intro
  • Usage
  • States
  • Structure
  • Behavior & Interactions
  • Responsive & Adaptive
• Support for responsive / adaptive wireframes

Visual

• Support for responsive / adaptive visuals
• Visual designs created for components and added to the Github Design Issue
• Designs added to Zeplin

Handoff

• Documentation issue created in Github (UX)
• Handover to Sketch library (Gerry Keane in Global Design - gerard.keane@sap.com)
• Handover to Axure library (Dublin team?)

Component Development Guidelines

• Data Model - Each component should have a complete and accurate data model in data.json file with the following properties

  • Version
  • Name
  • Properties
  • Modifiers
  • States
  • Aria

• SCSS

  • Use of the toolkit features(fd-colors, fd-space, etc)
  • Use of BEM Methodology
  • Use/Create SCSS mixins and functions as appropriate
  • Variables for theme access
  • Should have correct z-index
  • No SCSS compilation errors

• Accessibility

  • Keyboard support
  • Color contrast
  • ARIA attributes

• Theme support

  • Default
  • Light
  • Dark
  • Compact
  • Cozy

• Internationalization

  • RTL Support
  • Font Support
  • Multi Language Support

Documentation

• Usage
• Structure
• Modifiers / States
• Responsiveness
• Behaviour and Interaction
• Resources

Milestone

• All tickets in the milestone should be closed or removed so that we maintain what is completed in the milestone is what is delivered/deployed.
• All related components that were updated during a milestone should also have accompanying documentation
• Tested on the staging server
• Approved by at least one dev