Fepper Documentation

Pattern States

Pattern states provide your team and client a simple visual of the current state of patterns in Fepper. Pattern states can track the 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.

Setting a Pattern State

Setting a pattern's state is accomplished by writing a state key and value in the pattern's .md file (or whatever is configured in patternlab-config.json as 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
---

The state key/value can be mixed with other key/values like so:

---
state: inreview
content_key: content
---
Content is key

Setting a Pseudo-Pattern State

To set a pseudo-pattern's state, create a similarly named file with the .md extension (or frontMatterExtension).

For example, for the following pseudo-pattern:

00-elements/button/button~red.json

Name the file:

00-elements/button/button~red.md

Adding Custom States

The three default states might not be enough for everyone. To add custom 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.