Permalink
Branch: master
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
41 lines (31 sloc) 1.51 KB
title date tags
In Twig Pattern Lab, instead of Pseudo-Patterns with sidecar json use this better approach
2017-05-03
pattern-lab
twig
twig-tricks

I've always loved the Pseudo-Patterns feature of Pattern Lab - which is the ability to have a component of card.twig and then to demo several variants by passing in different data by having files named card~a.json, card~b.json, and card~c.json. This would show each of them as an item in Pattern Lab. It's awesome!

Except for two complaints I have: you can't include the card with the data from those json files in something else (like a grid of cards as an Organism), and you can only use text for the data since it's json or yaml (typing out Lorem Ipsum gets old). Here's how I work around both of those.

card.twig

<div class="card">
  <h3 class="card__title">{{ title }}</h3>
  <div class="card__body">
    {{ body }}
  </div>
</div>

card-a.twig

{% include "card.twig" with {
  title: headline.short,
  body: excerpt.medium,
} only %}

something-else.twig

{% include "card-a.twig" %}

This allows the data to follow down the chain of includes all the way to the cleverly-named something-else.twig. Additionally, in card-a.twig, I use excerpt.medium with is declared in the global data at _data/data.json, and contains a medium amount of Lorem ipsum characters for my prototyping pleasure. I hope this helps; happy Pattern Labbing!