Spike: documenting content model / UI patterns and UI components to support Design System efforts

[oksana-c]

Participants:

@hie1 @jordanamello @rachel-kauff @nataliedunbarCS @acrollet @kevwalsh @oksana-c

Facilitator: @oksana-c

User stories

Primary As a CMS Design System contributor, I need to consider and select methods and tools of documenting content model / UI patterns and UI components, so that the CMS Design System team has a shared source of truth and relevant up to date information when collaborating on the CMS Design System stories.

For context As a CMS Design System contributor, I need access to an inventory of the CMS content model / UI patterns and structural components, so that I can

• review them visually without the need to locate an instance in the CMS
• efficiently identify where standardization is possible and where we need to consider outliers
• efficiently analyze existing variations
• see frequency of usage in order to properly prioritize enhancements

Hypothesis

Drupal Spec tool does not provide sufficient level of detail about the CMS content model / UI patterns and UI components.

We believe that the CMS Design Systems team will be set up for efficient collaboration if we have an artifact(s) that offers a comprehensive data set about the current state of the CMS content model / UI patterns and UI components.

Acceptance Criteria

• [x] we've identified the best methods and tools for documenting existing content model / UI patterns and UI components with a purpose of creating an inventory.
  • [x] we've identified data points about our content model / UI patterns and UI components that we need quick access to
  • [x] the following considerations are taken into account when selecting tools:
    • accessible to relevant team members in "write" mode and to all in "read" mode
    • support for visual representation / screenshots
    • optional support of automated quantitative data around component usage
• [x] backlog for content model / UI patterns and UI components audit/inventory is refined

[oksana-c]

Outcomes:

• team discussed preliminary term definitions for UI Component, UI Pattern, Content Model Pattern
• team discussed initial data points that may be used during component/pattern inventory
• team agreed to use Airtable to start the inventory effort and created a base https://airtable.com/tblUXO5YIdUzBqBjZ/viwl9a0J9ekz27Rks?blocks=hide

Link to the lucidchart board used for this Spike discussion https://lucid.app/lucidchart/3488ef2a-dd3f-48dc-b8ea-dccc14370a47/edit?beaconFlowId=BDB8EDBC14AD90BE&page=0_0#?folder_id=home&browser=list

Follow up tasks: #3639 and #3640