Welcome to patternlab-node Discussions!

[JosefBredereck]

👋 Welcome!

We’re using Discussions as a place to connect with other members of our community. We hope that you:

• Ask questions you’re wondering about.
• Share ideas.
• Engage with other community members.
• Welcome others and are open-minded. Remember that this is a community we
  build together 💪.

To get started, comment below with an introduction of yourself and tell us about what you do with this community.

[bjornte]

Hi, I'm Bjørn T, a UX consultant from Oslo, Norway. I have a question that was previously posted on Stack Overflow that I would love some feedback on. Is that OK to ask about here?

The question is: “Presenting hierarchical data in Pattern lab — how to use the recommended atomic structure while visualizing a fully populated template?”

[mfranzke]

@bjornte thanks a lot for your reminder on this and bringing up that important topic.
I think that pattern lab has improved regarding data handling – if you do a clean install and choose to install the demo content as well, you would see some inheritances of data, both from global and next to the components and their consuming patterns as well.

For example:

• source/_patterns/pages/page.hbs has some pattern-specific data defined next to it via source/_patterns/pages/page.json
• source/_patterns/pages/page.hbs consumes source/_patterns/templates/page.hbs
• source/_patterns/templates/page.hbs consumes source/_patterns/molecules/text/page-header.hbs
• source/_patterns/molecules/text/page-header.hbs contains a reference to page.title which would get global data defined within source/_data/data.json (page.title that is), but this gets overwritten from the data defined within source/_patterns/pages/page.json which I've mentioned at the first topic

So we do have some kind of a data inheritance or modification/overwriting mechanism in pattern lab even already. This most likely has been integrated within the last four years without me being able to find the regarding issues quite quickly, but should give you some insight and inspirational support if you would take the pattern lab demo installation as basis to adapt from.

Probably a good solution in your case be not to use Pattern parameters directly, but save your data in the complementary JSON files next to your patterns.

[JosefBredereck]

Also, for the specific example, you choose in your screenshot, I would suggest looking into the homepage

patternlab-node/packages/starterkit-handlebars-demo/dist/_patterns/pages/homepage.json

Line 10 in ef8fb7d

"promoBlock": [

and the corresponding template where the code is generated with #each

patternlab-node/packages/starterkit-handlebars-demo/dist/_patterns/templates/homepage.hbs

Line 9 in ef8fb7d

{{# promoBlock }}

as you can see, multiple promo blocks in a list get rendered around a molecule, which gets added four times with different data.

There are also other possibilities to archive something like this with handlebars.
The #with statement, for example, allows you to specify regions that can contain your data. As you can see in this example, there is only one with statement with the name definitionListSection

patternlab-node/packages/starterkit-handlebars-demo/dist/_patterns/templates/checkout.hbs

Line 11 in ef8fb7d

{{#with definitionListSection }}

but it would also be possible to add the same block to that template file with another name and then add the corresponding parameter with data in your JSON.

[bjornte]

Hi Maximilian and Josef, thank you so much for your thoughtful reply! I will try to install as soon as I can. Based on your latest reply, I interpret that it is now technically possible to produce a page based on hierarchical content, with the recommended atomic structure, as shown in the example on Stack Overflow. Looking forward to testing it! :-)

[paulsally]

Hi Josef,

I've just started using Pattern Lab and it may be too early for me to ask a question but...

I created a dummy project using the TWIG templating engine with full demo for me to study. However, the app is not taking the homepage specific data: if I navigate the frontend to pages level it keeps showing the global data from _data. If I remove the "hero" hierarchical level from the homepage.json then it's showing the image, not sure if correctly.

This is the homepage.json as found in the demo:

  "title": "Home Page",
  "bodyClass": "home",
  "emergency": false,
  "hero": [
    {
      "img": {
        "landscape_16x9": {
          "src": "../../images/sample/landscape-16x9-mountains.jpg",
          "alt": "Mountains",
          "width": "1151",
          "height": "638"
        }
      },
      "headline": {
        "medium": "Top 10 mountain ranges for hiking"
      }
    }
  ],
  "touts": [... 

And this is the one showing the image:

  "title": "Home Page",
  "bodyClass": "home",
  "emergency": false,
  "img": {
    "landscape_16x9": {
      "src": "../../images/sample/landscape-16x9-mountains.jpg",
      "alt": "Mountains",
      "width": "1151",
      "height": "638"
    }
  },
  "headline": {
    "medium": "Top 10 mountain ranges for hiking"
  },
  "touts": [...

but it doesn't look that correct to me... since the hero property is referenced elsewhere...

I also tried the mustache version with full demo, instead, is working as expected.

Since we're using Drupal and I may be interested in integrating pattern lab into our workflow I was curious to test using the TWIG templating engine.

Thanks and sorry if the question is too basic!

[JosefBredereck]

Hello @paulsally, for questions regarding the twig engine it would be better to visit our Gitter chat. I persinally have never worked with it and there are may be people who have the information you need.

[paulsally]

@JosefBredereck Thank you! :)