[Molecules] Banner (Article, Publication, Blog)

[sabrinang]

Design

1. Audit and research

• Identify all unique usage instances
• Gather links to all documentation
• Look up frequency of use to determine priority
• (Optional) Gather links to useful information on how to craft atom/molecule/component

2. Component crafting

• Build: All colors, text styles, and spacing should use defined tokens where applicable
• States: Create all the necessary states (Active, hover, disabled)
• Accessibility: Meet applicable a11y and localization standards (reference the checklist)
  • Determine what accessibility issues might come up
  • Test against localization needs (content length)
• Create responsive states (Desktop, tablet, mobile)
• Prototype: If applicable, hook up interactions for prototyping
• Define all editorial/content standards (ex. max characters, min/max width)

Documentation

• Layer Naming: Format all layers and name with meaningful values
• Variants and Component Properties Naming: correctly named and consistent (goal is to make it easy to find in the library e.g. Component / State / Device)
• Write spec description
• How and when to use it (explain everything that’s editable, customizable and available in simple and succinct terms)
• Show all possible variations
  • States
  • Variants
• Show some examples in context

Synced with this Jira ticket