{% load static %} UI Component Comparison Test

UI Component Comparison Test

Comparing old include method vs new cotton component method for Button, Input, and Card components

Test 1: All Variants (Default Size)

Default Variant
{% include 'components/ui/button.html' with variant='default' text='Default Button' %}
Default Button
Destructive Variant
{% include 'components/ui/button.html' with variant='destructive' text='Delete Item' %}
Delete Item
Outline Variant
{% include 'components/ui/button.html' with variant='outline' text='Outline Button' %}
Outline Button
Secondary Variant
{% include 'components/ui/button.html' with variant='secondary' text='Secondary Button' %}
Secondary Button
Ghost Variant
{% include 'components/ui/button.html' with variant='ghost' text='Ghost Button' %}
Ghost Button
Link Variant
{% include 'components/ui/button.html' with variant='link' text='Link Button' %}
Link Button

Test 2: All Sizes (Default Variant)

Default Size
{% include 'components/ui/button.html' with size='default' text='Default Size' %}
Default Size
Small Size
{% include 'components/ui/button.html' with size='sm' text='Small Size' %}
Small Size
Large Size
{% include 'components/ui/button.html' with size='lg' text='Large Size' %}
Large Size
Icon Size
{% include 'components/ui/button.html' with size='icon' text='🔥' %}
🔥

Test 3: HTMX Attributes

hx-get Attribute
{% include 'components/ui/button.html' with text='Load Content' hx_get='/api/content/' hx_target='#content' %}
Load Content
hx-post Attribute
{% include 'components/ui/button.html' with text='Submit Form' hx_post='/api/submit/' hx_target='#result' hx_swap='innerHTML' %}
Submit Form

Test 4: Icons

Left Icon
{% include 'components/ui/button.html' with text='Save' icon_left='fas fa-save' %}
Save
Right Icon
{% include 'components/ui/button.html' with text='Next' icon_right='fas fa-arrow-right' %}
Next

Test 5: Additional Classes and Attributes

Custom Classes
{% include 'components/ui/button.html' with text='Custom Button' class='border-2 border-red-500 shadow-lg' %}
Custom Button
Type Attribute
{% include 'components/ui/button.html' with text='Submit' type='submit' %}
Submit
Disabled State
{% include 'components/ui/button.html' with text='Disabled' disabled=True %}
Disabled

Test 6: Complex Combinations

Destructive + Large + Icon + HTMX
{% include 'components/ui/button.html' with variant='destructive' size='lg' text='Delete All' icon_left='fas fa-trash' hx_post='/api/delete-all/' hx_target='#main' class='font-bold' %}
Delete All
Outline + Small + Right Icon + Custom Attributes
{% include 'components/ui/button.html' with variant='outline' size='sm' text='Export' icon_right='fas fa-download' attrs='data-testid="export-btn" title="Export data"' %}
Export

Test 7: Legacy Underscore Props vs Modern Hyphenated Attributes

This test verifies backward compatibility - cotton components should accept both legacy underscore props (hx_get, x_data) and modern hyphenated attributes (hx-get, x-data).

Legacy hx_get vs Modern hx-get
{% include 'components/ui/button.html' with text='Load Content' hx_get='/api/content/' hx_target='#content' %}
Load Content
Load Content
Legacy hx_post vs Modern hx-post
{% include 'components/ui/button.html' with text='Submit Form' hx_post='/api/submit/' hx_target='#result' hx_swap='innerHTML' %}
Submit Form
Submit Form
Legacy x_data vs Modern x-data
{% include 'components/ui/button.html' with text='Alpine Button' x_data='{ clicked: false }' %}
Alpine Button
Alpine Button
Legacy onclick vs Modern onclick
{% include 'components/ui/button.html' with text='Click Handler' onclick="alert('Clicked!')" %}
Click Handler
Legacy type vs Modern type
{% include 'components/ui/button.html' with text='Submit Form' type='submit' %}
Submit Form
Legacy disabled vs Modern disabled
{% include 'components/ui/button.html' with text='Disabled Button' disabled=True %}
Disabled Button
Complex Legacy Props Combination
{% include 'components/ui/button.html' with variant='destructive' size='lg' text='Legacy Complex' hx_post='/api/complex/' hx_target='#result' x_data='{ processing: false }' type='submit' %}
Legacy Complex
Modern Complex
Alpine.js x_on Special Case
{% include 'components/ui/button.html' with text='Alpine Click' x_on='@click="clicked = true"' %}
Alpine Click
Alpine Click

Test 8: Input Component Comparison

Basic Text Input
{% include 'components/ui/input.html' with type='text' placeholder='Enter your name' name='name' %}
Email Input with Value
{% include 'components/ui/input.html' with type='email' placeholder='email@example.com' name='email' value='test@example.com' %}
Password Input
{% include 'components/ui/input.html' with type='password' placeholder='Password' name='password' required=True %}
Number Input with Min/Max
{% include 'components/ui/input.html' with type='number' placeholder='Age' name='age' attrs='min="18" max="100"' %}
Disabled Input
{% include 'components/ui/input.html' with type='text' placeholder='Disabled input' name='disabled' disabled=True value='Cannot edit' %}
Readonly Input
{% include 'components/ui/input.html' with type='text' name='readonly' readonly=True value='Read only value' %}
Input with Custom Class
{% include 'components/ui/input.html' with type='text' placeholder='Custom styled' name='custom' class='border-blue-500 bg-blue-50' %}
Input with HTMX Attributes
{% include 'components/ui/input.html' with type='text' placeholder='Search...' name='search' hx_get='/api/search/' hx_target='#results' hx_trigger='keyup changed delay:300ms' %}
Input with Alpine.js
{% include 'components/ui/input.html' with type='text' placeholder='Alpine input' name='alpine' x_model='inputValue' %}

Test 8: Card Component Comparison

Basic Card with Title
{% include 'components/ui/card.html' with title='Basic Card' content='This is a simple card with just a title and content.' %}
This is a simple card with just a title and content.
Card with Title and Description
{% include 'components/ui/card.html' with title='Card with Description' description='This card has both a title and a description' content='Here is the main content of the card.' %}
Here is the main content of the card.
Card with Custom Header Content
{% include 'components/ui/card.html' with header_content='

Custom Header

New
' content='This card has custom header content instead of a simple title.' %}
This card has custom header content instead of a simple title.
Card with Body Content (instead of slot)
{% include 'components/ui/card.html' with title='Body Content Card' body_content='

This content is passed via body_content parameter.

' %}
Card with Footer
{% include 'components/ui/card.html' with title='Card with Footer' content='This card has footer content at the bottom.' footer_content='' %}
This card has footer content at the bottom.
Complete Card (All Sections)
{% include 'components/ui/card.html' with title='Complete Card' description='This card has all possible sections' content='Main content goes here. This is the primary content area.' footer_content='Last updated: Today' %}
Main content goes here. This is the primary content area.
Card with Custom Classes
{% include 'components/ui/card.html' with title='Custom Styled Card' content='This card has custom styling applied.' class='border-2 border-green-200 bg-green-50 shadow-lg' %}
This card has custom styling applied.
Content-Only Card (No Header)
{% include 'components/ui/card.html' with content='This card has only content, no header or footer sections.' %}
This card has only content, no header or footer sections.

HTML Output Inspection

Use browser dev tools to inspect the HTML output and ensure it's identical.

Include Version HTML:

Cotton Version HTML: