Code-based design system

[allly-b]

Issue description

Designers want a design system, like Storybook, so that they don't have to manually create key components in figma and constantly update them when there are changes made in the code or other tickets. The manual process right now leaves room for error and for things becoming out of sync on stable.

Furthermore, for components like tables, there are a lot of different "states" (pagination, sort, filtering, eye/gear icon on rows, etc) that would be far too time consuming to mock up in figma for every possible state combination. This means a designer has to to go to a sandbox to see what is the current of components like tables. Even then some items, such as the eye/gear icon, are dependent on the object state and the users permissions, so just because a designer checks a sandbox they may miss some states because they don't check every permission/object combination (this would be so tedious!).

Our goal is to help with the quality of life for designers by providing a Proof of concept for a design system via code that can be viewable on stable. This will require design and dev to work together, using a single component as an example. By the end of this, the POC should meet the needs of design enough that for this single component they do not need to look at figma as the source of truth.

suggestions of how to work

Acceptance criteria

• Requirements for a MVP design system are determined
• a single component is agreed upon by dev & design
• work is planned
• work is complete and POC is usable by design

Additional context

This Renewal Pod doc is an awesome example of tracking and communicating work

Notes on ticket creation:

• If possible, add any tickets as a sub-issue of this ticket. Most likely that will only apply to bundles since other tickets already have parents
• Label your tickets with dev and/or design and also design-system

Links to other issues

No response

[allly-b]

Added this to leads discussion if we have time, otherwise it will go to refinement