search

lmc-eu / spirit-web-twig-bundle

[READ-ONLY] Spirit Design System Web Twig components
0 stars 0 forks source link

Extending of blocks and wrapped templates in the template #6

Open literat opened 2 months ago

literat commented 2 months ago

I cannot extend a block from another template that is extending the template. The block cannot be changed. But when I take out the block from the DS wrapper component, extending works.

Based on the documentation of the embed (https://twig.symfony.com/doc/3.x/tags/embed.html) adjusting the block should be possible, so I think that the TwigX bundle somehow breaks the standard behavior of the Twig.

https://jira.almacareer.tech/browse/DS-609

literat commented 2 months ago

If I'm understanding things correctly here, I'd say that block overloading is a Twig issue that can't be carried over into the TwigX component composition concept and needs to be thought of differently. That is, overloading the inside of a component is not possible (unless I'm making do with props) and has to be done through slots and inserting custom content through them.

literat commented 2 months ago

Or rather like this, it will be clearer:

<SearchResultCard>
  <SearchResultCardHeader>
   <!-- header content -->
  </SearchResultCardHeader>
  <SearchResultCardBody>
    <!-- body content -->
  </SearchResultCardBody>
  <SearchResultCardFooter>
    <!-- footer content -->
  </SearchResultCardFooter>
</SearchResultCard>
literat commented 2 months ago

Hey, I think I've addressed this before. I ended up creating the individual slots as separate mini-components:

<SearchResultCardHeader>
  <SearchResultCardTitle>
    <Link href="/vacancy-detail" isUnderlined>
      Obch. zástupce výdejních míst – Moravskoslezský kraj
    </Link>
  </SearchResultCardTitle>
  <SearchResultCardLogo
    alt="UniCredit Bank Czech Republic and Slovakia, a.s."
    src="https://picsum.photos/300/150/"
    srcSet="https://picsum.photos/600/300 2x, https://picsum.photos/300/150"
  />
  <SearchResultCardStatus>
    Doporučujeme
  </SearchResultCardStatus>
  <SearchResultCardFavoriteLink
    href="/unmark-as-favorite"
    onClick="() => {}"
    title="Odebrat z oblíbených"
    isSelected
  />
</SearchResultCardHeader>