Pattern States
Pattern states provide your team and client a simple visual of the current state of patterns in Fepper. Pattern states can track progress of a pattern from development, through client review, to completion. They can also be customized to refer to additional states. They are denoted by colored dots in the UI menu, Code Viewer, and View Alls.
Default Pattern States
inprogress: the pattern is in development, denoted by a red dot.inreview: the pattern is being reviewed for acceptance, denoted by a yellow dot.complete: the pattern is ready for production, denoted by a green dot.
Giving Patterns a State
Giving patterns a state is accomplished by setting the state key in a pattern's .md file (or whatever is configured in patternlab-config.json under frontMatterExtension). Consider this pattern:
source/_patterns/compounds/blocks/media-block.mustache
Create or edit a file in the same location named media-block.md:
---
state: inreview
---
This is a block of media.Adding Customized States
The three default states might not be enough for everyone. To add customized states, modify source/_styles/pattern-scaffolding.css, a Fepper-specific stylesheet that is editable by end-users. You can use the following as your CSS template for new pattern states:
.newpatternstate:before {
color: #998866 !important;
}
Add state: newpatternstate to your pattern's .md file to have the new pattern state show in the UI menu and Code Viewer.