Welcome to patternlab-node Discussions! #1401

JosefBredereck · 2021-12-30T20:10:42Z

JosefBredereck
Dec 30, 2021
Maintainer

👋 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 · 2022-02-16T20:55:17Z

bjornte
Feb 16, 2022

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?”

3 replies

mfranzke Feb 16, 2022
Collaborator

@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 Feb 17, 2022
Maintainer Author

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

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

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 Feb 17, 2022

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 · 2022-08-13T18:34:38Z

paulsally
Aug 13, 2022

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!

2 replies

JosefBredereck Aug 14, 2022
Maintainer Author

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 Aug 14, 2022

@JosefBredereck Thank you! :)

Welcome to patternlab-node Discussions! #1401

Uh oh!

JosefBredereck Dec 30, 2021 Maintainer

👋 Welcome!

Replies: 2 comments · 5 replies

Uh oh!

bjornte Feb 16, 2022

Uh oh!

Uh oh!

mfranzke Feb 16, 2022 Collaborator

Uh oh!

JosefBredereck Feb 17, 2022 Maintainer Author

Uh oh!

Uh oh!

bjornte Feb 17, 2022

Uh oh!

Uh oh!

paulsally Aug 13, 2022

Uh oh!

JosefBredereck Aug 14, 2022 Maintainer Author

Uh oh!

paulsally Aug 14, 2022

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier! Saves Data!

JosefBredereck
Dec 30, 2021
Maintainer

Replies: 2 comments 5 replies

bjornte
Feb 16, 2022

mfranzke Feb 16, 2022
Collaborator

JosefBredereck Feb 17, 2022
Maintainer Author

paulsally
Aug 13, 2022

JosefBredereck Aug 14, 2022
Maintainer Author