!license

Wrapper Plugin for Pattern Lab Node

The Wrapper Plugin allows Pattern Lab Node users to add a wrapper element with class around patterns when shown in the single preview but still allow re-usability in other patterns without the wrapper element.

Installation

To add the Wrapper Plugin to your project using npm type:

npm install plugin-node-wrappable --save

Or add it directly to your project's package.json file and run npm install

During installation, the plugin is added as a key to the plugins object in your main Pattern Lab project's patternlab-config.json file

> If you don't see this object, try running npm run postinstall within the root of your project.

Configuration

Post-installation, you will see the following in your patternlab-config.json:

Example:

``
"plugins": {
"plugin-node-wrappable": {
"enabled": true,
"initialized": false
}
}
`

Additional Markdown front matter

With the Wrapper Plugin installed, you can now set an additional wrap_in attribute in the pattern Markdown front matter.

For example, if we want to preview a button pattern with a gray wrapper, you have to add the attribute to 00-button.md:

`
---
title: Button
wrap_in: gray
---

[Insert description here]
`

This results in an additional