Define pattern demo code

[oliviaflory]

We have defined a pattern as: something that can be accomplished in multiple ways utilizing a combination of component(s) with additional design considerations.

• Patterns are “recipes” with “ingredients” (components) that are combined to accomplish something.
• Patterns may have demo code associated with a pattern for example purposes. However no pattern will support all possible configurations in code.

We need to define what we mean by demo code so our team and our adopters know what to expect.

• Previous discussion on “recipes” and “ingredients” to create a pattern with demo/sample/starter code but not exported from library.
• These could still live in Storybook but would not be imported by the consumers.
• Could potentially include layout components / layout modules (see Dotcom, Security).
• Patterns that we plan to deprecate the code:
  • Import and upload — assemble using modal, file uploader
  • Remove and delete — assemble text input, checkboxes

Example of a current use case in C4IP that Elysia considers demo code:

• Drag and drop we are using another library to showcase what we expect them to do

Example of recipes from Twilio: https://paste.twilio.design/patterns/data-export Example from gov.uk: https://design-system.service.gov.uk/patterns/complete-multiple-tasks/

### Tasks
- [ ] Create definition of pattern “code”
- [ ] Play back to the team during sprint demo

Things that may contribute to demo code —

• import statements
• actual markup
• example code

[elycheea]

Content block from dotcom is another example of showing patterns in Storybook (but also content block variants that are ones we want to deprecate 👀).

[kingtraceyj]

here's some inspiration from uk.gov: https://design-system.service.gov.uk/patterns/addresses/