docs: pattern wrap classes config and details documentation

Refs: pattern-lab#1432

packages/docs/src/docs/advanced-config-options.md

@@ -210,7 +210,7 @@ For example, to export the navigation, header, and footer, one might do:
 
 ## patternMergeVariantArrays
 
-Used to override the merge behavior of pattern variants. For more information see [The Pseudo-Pattern File Data](docs/using-pseudo-patterns/#heading-the-pseudo-pattern-file-data).
+Used to override the merge behavior of pattern variants. For more information see [The Pseudo-Pattern File Data](/docs/using-pseudo-patterns/#heading-the-pseudo-pattern-file-data).
 
 - `true` will merge arrays of the pattern and pseudo-pattern with [lodash merge](https://lodash.com/docs/4.17.15#merge)
 - `false` will override arrays from the pattern with pseudo-patterns arrays
@@ -221,6 +221,29 @@ Used to override the merge behavior of pattern variants. For more information se
 
 **default**: `true` | `undefined`
 
+## patternWrapClassesEnable
+
+Set to `true` to enable adding a wrapper div with css class(es) around a pattern.  
+For more information see [Pattern Wrap Classes](/docs/pattern-wrap-classes/).
+
+```javascript
+"patternWrapClassesEnable": false,
+```
+
+**default**: `false`
+
+## patternWrapClassesKey
+
+Configure your class keys for `"patternWrapClassesEnable": true`.  
+For more information see [Pattern Wrap Classes](/docs/pattern-wrap-classes/).
+
+
+```javascript
+"patternWrapClassesKey": ['theme-class'],
+```
+
+**default**: `[]`
+
 ## renderFlatPatternsOnViewAllPages
 
 Used to activate rendering flat patterns on view all pages and generate view all pages if only flat patterns are available

packages/docs/src/docs/advanced-pattern-wrap-classes.md

@@ -0,0 +1,105 @@
+---
+title: Pattern Wrap Classes
+tags:
+  - docs
+category: advanced
+eleventyNavigation:
+  title: Pattern Wrap Classes
+  key: advanced
+  order: 300
+sitemapPriority: '0.8'
+---
+
+This feature allows you to add a wrapper div with css class(es) around a pattern when shown in the single preview.
+If it gets included in another pattern, the wrapper is not added.
+
+This comes in handy if you, for example, use theming classes to visualize different backgrounds, colors etc.
+
+## Configuration
+
+Enable this feature with the configuration options 
+[patternWrapClassesEnable](/docs/editing-the-configuration-options/#heading-patternwrapclassesenable) and 
+[patternWrapClassesKey](/docs/editing-the-configuration-options/#heading-patternwrapclasseskey).
+
+## How does it work?
+
+Patternlab will look for any "data key" added to the `patternWrapClassesKey` array and adds that
+date to the wrapper element classes.
+
+Data key can be set inside the Markdown or JSON file of any pattern.
+
+### Example Config
+
+```json
+"patternWrapClassesKey": ["theme-class"]
+```
+
+## Use in Markdown
+
+Usage [Documenting Patterns](/docs/documenting-patterns/)
+
+### my-pattern.md
+```markdown
+---
+theme-class: my-theme-class
+---
+```
+
+### Result
+```html
+<div class="pl-pattern-wrapper-element my-theme-class">...markup of pattern...</div>
+```
+
+## Use in JSON
+
+Usage [Creating Pattern-specific Values](/docs/creating-pattern-specific-values/)
+
+### my-pattern.json
+```json
+{
+  "theme-class": "my-other-theme-class"
+}
+```
+
+### Result
+```html
+<div class="pl-pattern-wrapper-element my-other-theme-class">...markup of pattern...</div>
+```
+
+## Pseudo-Patterns
+
+This will work with pseudo-patterns too ([Using Pseudo-Patterns](/docs/using-pseudo-patterns/))
+
+### my-pattern~variant.json
+```json
+{
+  "theme-class": "my-variant-theme-class"
+}
+```
+
+### Result
+```html
+<div class="pl-pattern-wrapper-element my-variant-theme-class">...markup of pattern...</div>
+```
+
+## Multiple entries in "patternWrapClassesKey"
+
+Will result in multiple classes in the wrapper div.
+
+### Example Config
+```json
+"patternWrapClassesKey": ["theme-class", "other-class"]
+```
+
+### my-pattern.json
+```json
+{
+  "theme-class": "theme-class",
+  "other-class": "some-other-class"
+}
+```
+
+### Result
+```html
+<div class="pl-pattern-wrapper-element theme-class some-other-class">...markup of pattern...</div>
+```