How to create component "presets"?

[iamalexpayne]

{%
with
common_styles="flex justify-center rounded-md px-3 py-2.5 text-md font-semibold leading-6"
primary_styles="bg-green-950 text-white shadow-sm hover:bg-green-900"
secondary_styles="border border-green-950 hover:bg-green-100 text-green-900"
style=styles=(common_styles|add:primary_styles if style == 'primary' else common_styles|add:secondary_styles)
%}

{% if url %}
{{ slot }}
{% else %}
{{ slot }}
{% endif %}

{% endwith %}

Is giving me "Did you forget to load/register this 'endwith' tag" error

[iamalexpayne]

Ah, I see that I should use c-vars instead of with.

But when I have c-vars inside my cotton/button.html, I get a TemplateDoesNotExist at cotton/vars.html

[wrabit]

@iamalexpayne

1. I am not sure if django natively supports multi-line tags as you have laid out with your with
2. I don't think this should work either style=styles=(common_styles|add:primary_styles if style == 'primary' else common_styles|add:secondary_styles) are you sure this is working code even without cotton?
3. You can reach for <c-vars />, and something like this may help you:

This does rely on you adding an item getter templatetag to get an item from a dict by its key.

So putting this in a templatetag file and loading it:

@register.filter
def get_item(dictionary, key):
    return dictionary.get(key)

(an upcoming cotton version will have this baked in)

And then you can do:

<!-- button.html -->
<c-vars
  style="default"
  :styles="{
    'default': '...',
    'primary': '...',
    'secondary': '...',
  }"
/>

<button class="{{ styles|get_item:style }}">hello</button>

<!-- view.html -->
<c-button /> 
<c-button style="primary" /> 
<c-button style="secondary" /> 

[iamalexpayne]

Thank you!

[confuzeus]

I wanted to implement the same thing. This looks like a sane pattern, thanks.

[fertek]

I was using:

<c-vars
    base_classes="inline-flex items-center px-6 py-3.5 border border-transparent text-base font-medium rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 whitespace-nowrap"
    variant="primary"
/>

<button 
    {{ attrs }} 
    class="{{ base_classes }} {% if variant == 'secondary' %}bg-gray-500 hover:bg-gray-600 text-white focus:ring-gray-400{% elif variant == 'danger' %}bg-red-500 hover:bg-red-600 text-white focus:ring-red-400{% else %}bg-indigo-500 hover:bg-indigo-600 text-white focus:ring-indigo-400{% endif %}"
>
{{ slot }}
</button>

But this is even better:

<c-vars
  base_classes="inline-flex items-center px-6 py-3.5 border border-transparent text-base font-medium rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 whitespace-nowrap"
  :variants="{
    'primary': 'bg-indigo-500 hover:bg-indigo-600 text-white focus:ring-indigo-400',
    'danger': 'bg-red-500 hover:bg-red-600 text-white focus:ring-red-400',
    'secondary': 'bg-gray-500 hover:bg-gray-600 text-white focus:ring-gray-400',
  }"
  variant="primary"
/>

<button {{ attrs }} class="{{ base_classes }} {{ variants|get_item:variant }}">
    {{ slot }}
</button>

I found this example in the Cotton's code, but it's not in the documentation, is it?

PS: Thanks for the great library! I wanted to join Discord, but the invitation at https://discord.gg/RdNeGTfd is invalid.

[wrabit]

@fertek the discord link should now be fixed.. and yes, that pattern is detailed here https://medium.com/@willabbott/django-cotton-component-variants-for-smarter-reusability-07d8e4358ed0, thanks

[iamalexpayne]

Aha! I have to create the vars.html file too!

[wrabit]

@iamalexpayne hmm I don't think so - <c-vars> is inbuilt to cotton. ** start's reconsidering naming of it! **

[iamalexpayne]

Hmm. I had to add vars.html to my templates/cotton. It didn't work otherwise.

[wrabit]

I would double check

[iamalexpayne]

I was trying to put if true, c-vars x y z else c-vars a b c
Meaning I had two c-vars tags. The 2nd c-vars was throwing the unknown template.

Thanks for the help and loving the cotton app so far!! <3