Overview
Panel template files are just regular ERB partials, and can can live anywhere in your app’s views directory. Unlike documentation page templates they are not additionally run through the markdown parser.
To match the padding and styles of the system panels you should ensure your panel’s content is in an element with the .lookbook-panel class applied to it.
<div class="lookbook-panel">
<!-- your panel content here -->
</div>
Each panel has access to a number of variables and helpers that can be used to build dynamic content.
Variables
The following variables are available in panel templates:
panel
[Store]
The resolved panel options object.
Example:
<p>
This <%= panel.label %> panel can be switched
to using the keyboard shortcut <%= panel.hotkey %>
</p>
preview
[PreviewEntity]
An object representing the current preview.
Example:
<h2>This is the <%= preview.label %> preview</h2>
target
[RenderedScenarioEntity,ScenarioGroupEntity]
An object representing the scenario or group of scenarios currently being rendered.
Example:
<h2>Currently rendering '<%= target.label %>'.</h2>
scenarios
[Array<RenderedScenarioEntity>]
An array of rendered scenario objects representing the individual scenarios in the current preview. For non-grouped (i.e. regular) previews, this array will always only have one item.
Example:
<p>This preview is showing <%= scenarios.size %> scenarios rendered together.</p>
<p>Here is the source code for each scenario:</p>
<% scenarios.each do |scenario| %>
<div>
<%= scenario.source %>
<div>
<% end %>
context
[Hash]
Request context data.
Example:
<p>Current URL path: <%= context.path %></p>
data
[Hash]
Shortcut for accessing the Lookbook global data store.
Example:
<p>My custom data variable value: <%= data.my_variable %></p>
app
[Lookbook]
The main Lookbook application object.
Example:
<p>There are <%= app.previews.size %> previews available.</p>
<% app.logger.info("Successfully output the number of previews") %>
Helpers
All UI helpers are available for use within panel templates. See the UI elements helper docs for details.