DRY labels

[gerardo-rodriguez]

This creates a partial for the labels. This addresses part of #22 (headings not addressed, there are enough differences between how they are used in page-item.hbs and item.hbs that I need to think that one through more).

cc: @erikjung @tylersticka

[erikjung]

I would keep the logic out of this partial and include in each parent if needed. The partial should assume that labels is present.

it can be called like:

{{#if data.labels}}
  {{> drizzle.labels labels=data.labels}}
{{/if}}

And then the partial can iterate over labels:

{{#each labels as |label|}}
...
{{/each}}

[erikjung]

It might be too fragile, but I think we can address some of the heading use cases with additional logic in the template, for example:

<{{tag}} {{#if id}}id="{{id}}"{{/if}} class="
 drizzle-u-inlineBlock
 drizzle-u-alignMiddle
 drizzle-u-textNoWrap
 drizzle-u-padRight">
  {{#if href}}
    <a href="{{href}}" class="drizzle-u-linkHidden">
      {{text}}
    </a>
  {{else}}
    {{text}}
  {{/if}}
</{{tag}}>

{{> drizzle.heading tag="h3" id="foo" href="#foo" text="Heading"}}

OR, we could also leverage the layout helpers for something like this.

[gerardo-rodriguez]

@erikjung Question: If I am using a two word name for the file, should it be labelheader.hbs or labelHeader.hbs or label-header.hbs? I see a page-item.hbs, but wasn't sure. Thanks!

[erikjung]

@mrgerardorodriguez Out of those, the only awkward one is the camel-case IMO.

[gerardo-rodriguez]

@erikjung: I added this logic into this partial. What are your thoughts? Not all label headings will have labels.

[gerardo-rodriguez]

@tylersticka @erikjung: Ready for a re-review, thanks! I added the heading to the labelheader.hbs partial. I then extended that for the 2nd variation labelheader-anchorid.hbs partial.

[erikjung]

@mrgerardorodriguez I think ideally we should get this all wrapped into one partial, with logic to account for the variable things:

• The heading tag (<h3>, <h4>, etc.)
• Sometimes an <a> will be needed in the heading
• Sometimes there will be labels to loop over

And with those conditions handled, the partial (assuming we keep the labelheader name) can be used in a way something like this:

{{#> drizzle.labelheader tag="h3" labels=data.labels  id=(toSlug @key)}}
  Heading Text
{{/drizzle.labelheader}}

It's a complex partial, but I think we should go all-in and make it do what we need, versus having to use multiple ones. I'd be happy to help out if needed.

[gerardo-rodriguez]

Cool, thanks @erikjung! I'll give it a go and let you know if I need any help. 😉

[gerardo-rodriguez]

@erikjung I'm not convinced by this if/else sequence...what are your thoughts?

[erikjung]

@mrgerardorodriguez I think we can simplify it.

If we supply an id, then we can use that to determine whether or not the anchor is output.

{{#if id}}
  <a href="#{{id}}">{{> @partial-block}}</a>
{{else}}
  {{> @partial-block}}
{{/if}}

{{#> drizzle.labelheader id=(toSlug data.title)}}
  {{data.title}}
{{/drizzle.labelheader}}

[gerardo-rodriguez]

Good catch, @erikjung. Just to be clear, there are still 3 possible outcomes.

1. <a href="./{{key}}.html">{{> @partial-block}}</a>
2. <a href="#{{id}}" class="drizzle-u-linkHidden">{{> @partial-block}}</a>
3. {{> @partial-block}}

I'm not seeing an obvious way to more cleanly handle the differences between the first and the second.

[erikjung]

@mrgerardorodriguez

Supplying an id lets us know to wrap things with a self-referencing "hidden" anchor. If we need to have an arbitrary <a> instead, we can omit the id and simply include whatever markup is needed via @partial-block:

{{#> drizzle.labelheader tag="h3"}}
  <a href="./{{@key}}.html">{{data.title}}</a>
{{/drizzle.labelheader}}

[gerardo-rodriguez]

Ah, got it. Thanks for the advice @erikjung! 😀

[gerardo-rodriguez]

@erikjung Okay, I refactored the both partials back into a single one.

Questions:

1. Is it odd that I renamed the name key to title? Does something need to change in the drizzle-builder repo?
2. The partial still feels clunky to me. How do you feel about it?

[gerardo-rodriguez]

@erikjung @tylersticka: Ready for a re-review!

1. Is it odd that I renamed the name key to title? Does something need to change in the drizzle-builder repo?

Feel free to ignore this, as this is no longer applicable.

1. The partial still feels clunky to me. How do you feel about it?

Thanks for helping me work through this @erikjung! 😃

[erikjung]

@mrgerardorodriguez It's a beauty! 👍

[tylersticka]

LGTM 👍