django-cotton-bs5 0.5.1__tar.gz → 0.6.0__tar.gz

{django_cotton_bs5-0.5.1 → django_cotton_bs5-0.6.0}/PKG-INFO

@@ -1,20 +1,21 @@
 Metadata-Version: 2.1
 Name: django-cotton-bs5
-Version: 0.5.1
+Version: 0.6.0
 Summary: Bootstrap 5 components for use with Django Cotton.
 License: MIT
 Author: Sam
 Author-email: samuel.scott.jennings@gmail.com
-Requires-Python: >=3.10,<4.0
+Requires-Python: >=3.12,<4.00
+Classifier: Framework :: Django
+Classifier: Framework :: Pytest
 Classifier: License :: OSI Approved :: MIT License
 Classifier: Programming Language :: Python :: 3
-Classifier: Programming Language :: Python :: 3.10
-Classifier: Programming Language :: Python :: 3.11
 Classifier: Programming Language :: Python :: 3.12
 Provides-Extra: django-compressor
+Requires-Dist: beautifulsoup4 (>=4.14.3,<5.0.0)
 Requires-Dist: django-compressor (>=4.5.1,<5.0.0) ; extra == "django-compressor"
-Requires-Dist: django-cotton (>=2.3.1)
-Requires-Dist: django-libsass (>=0.9,<0.10)
+Requires-Dist: django-cotton (>=2.6.1,<3.0.0)
+Requires-Dist: django-libsass (>=0.9,<0.10) ; extra == "django-compressor"
 Description-Content-Type: text/markdown
 
 # Django Cotton BS5
@@ -62,6 +63,90 @@ The following Bootstrap 5 components are currently available as Django Cotton co
 
 More components are planned. Please request additional Bootstrap 5 components or features via the [issue tracker](https://github.com/SamuelJennings/cotton-bs5/issues).
 
+## Testing Components
+
+This package provides four pytest fixtures for testing Django Cotton components:
+
+### `cotton_render` Fixture
+
+Renders a component and returns the raw HTML as a string.
+
+```python
+def test_alert_component(cotton_render):
+    html = cotton_render(
+        'cotton_bs5.alert',
+        message="Hello World",
+        variant="success"
+    )
+    assert 'alert-success' in html
+    assert 'Hello World' in html
+```
+
+### `cotton_render_soup` Fixture
+
+Renders a component and returns a BeautifulSoup parsed HTML object for easier DOM traversal and assertions.
+
+```python
+def test_alert_component(cotton_render_soup):
+    soup = cotton_render_soup(
+        'cotton_bs5.alert',
+        message="Hello World",
+        variant="success"
+    )
+    alert_div = soup.find('div', class_='alert')
+    assert 'alert-success' in alert_div['class']
+    assert alert_div.get_text() == 'Hello World'
+```
+
+### `cotton_render_string` Fixture
+
+Compiles and renders template strings containing Cotton component syntax. Useful for testing multi-component markup and complex layouts inline without creating separate template files.
+
+```python
+def test_button_inline(cotton_render_string):
+    html = cotton_render_string("<c-button variant='primary'>Click me</c-button>")
+    assert 'btn-primary' in html
+
+def test_nested_components(cotton_render_string):
+    html = cotton_render_string(
+        "<c-ul><c-li text='first' /><c-li text='second' /></c-ul>"
+    )
+    assert 'first' in html
+    assert 'second' in html
+```
+
+### `cotton_render_string_soup` Fixture
+
+Combines `cotton_render_string` with BeautifulSoup parsing for easier DOM traversal and assertions on multi-component structures.
+
+```python
+def test_nested_list(cotton_render_string_soup):
+    soup = cotton_render_string_soup(
+        "<c-ul><c-li text='first' /><c-li text='second' /></c-ul>"
+    )
+    items = soup.find_all('li')
+    assert len(items) == 2
+    assert items[0].get_text() == 'first'
+
+def test_complex_layout(cotton_render_string_soup):
+    template = '''
+        <c-card>
+            <c-card.title>{{ title }}</c-card.title>
+            <c-card.body>
+                <c-button variant='primary'>{{ action }}</c-button>
+            </c-card.body>
+        </c-card>
+    '''
+    soup = cotton_render_string_soup(template, context={
+        'title': 'My Card',
+        'action': 'Click Here'
+    })
+    assert soup.find('h5').get_text() == 'My Card'
+    assert 'btn-primary' in soup.find('button')['class']
+```
+
+All fixtures automatically inject a request object, so you don't need to create one manually.
+
 ## Contributing
 
 This library follows django-cotton conventions and Bootstrap 5 standards. When adding new components:

django_cotton_bs5-0.6.0/README.md

@@ -0,0 +1,142 @@
+# Django Cotton BS5
+
+Bootstrap 5 components for Django Cotton - A comprehensive library of reusable, modular components.
+
+**Note:** This project is currently a work in progress. Users are encouraged to request new components or features via the [issue tracker](https://github.com/SamuelJennings/cotton-bs5/issues).
+
+[View demo](https://samueljennings.github.io/cotton-bs5/)
+
+## Installation
+
+```bash
+pip install django-cotton-bs5
+```
+
+Add `cotton_bs5` to your `INSTALLED_APPS` in `settings.py`:
+
+```python
+INSTALLED_APPS = [
+    ...
+    "django_cotton",
+    "cotton_bs5",
+    ...
+]
+```
+
+## Available Components
+
+The following Bootstrap 5 components are currently available as Django Cotton components:
+
+- **Alert** (`<c-alert>`) — Bootstrap alerts with variants, dismissible, slot/text support
+- **Accordion** (`<c-accordion>`, `<c-accordion.item>`, `<c-accordion.header>`) — Collapsible accordion panels
+- **Breadcrumbs** (`<c-breadcrumbs>`, `<c-breadcrumbs.item>`) — Navigation breadcrumbs
+- **Button** (`<c-button>`) — Button/link with variants, outline, icon, slot/text
+- **Button Group** (`<c-button_group>`) — Grouped buttons, vertical/size/label support
+- **Card** (`<c-card>`, `<c-card.body>`, `<c-card.title>`) — Card container, body, and title
+- **List Group** (`<c-list_group>`, `<c-list_group.item>`) — List group and items, horizontal/numbered/active/disabled
+- **Modal** (`<c-modal>`, `<c-modal.title>`, `<c-modal.body>`) — Modal dialog, title, and body
+- **Navbar** (`<c-navbar>`) — Responsive navigation bar with brand, expand, toggler
+- **Progress** (`<c-progress>`) — Progress bar with value, min/max, variant, striped, animated, label
+- **Spinner** (`<c-spinner>`) — Loading spinner, border/grow, size, variant, label
+- **Table** (`<c-table>`) — Responsive table, striped, bordered, hover, small, variant, caption
+- **Tabs** (`<c-tabs>`, `<c-tabs.item>`, `<c-tabs.pane>`) — Tab navigation and tab panes
+
+More components are planned. Please request additional Bootstrap 5 components or features via the [issue tracker](https://github.com/SamuelJennings/cotton-bs5/issues).
+
+## Testing Components
+
+This package provides four pytest fixtures for testing Django Cotton components:
+
+### `cotton_render` Fixture
+
+Renders a component and returns the raw HTML as a string.
+
+```python
+def test_alert_component(cotton_render):
+    html = cotton_render(
+        'cotton_bs5.alert',
+        message="Hello World",
+        variant="success"
+    )
+    assert 'alert-success' in html
+    assert 'Hello World' in html
+```
+
+### `cotton_render_soup` Fixture
+
+Renders a component and returns a BeautifulSoup parsed HTML object for easier DOM traversal and assertions.
+
+```python
+def test_alert_component(cotton_render_soup):
+    soup = cotton_render_soup(
+        'cotton_bs5.alert',
+        message="Hello World",
+        variant="success"
+    )
+    alert_div = soup.find('div', class_='alert')
+    assert 'alert-success' in alert_div['class']
+    assert alert_div.get_text() == 'Hello World'
+```
+
+### `cotton_render_string` Fixture
+
+Compiles and renders template strings containing Cotton component syntax. Useful for testing multi-component markup and complex layouts inline without creating separate template files.
+
+```python
+def test_button_inline(cotton_render_string):
+    html = cotton_render_string("<c-button variant='primary'>Click me</c-button>")
+    assert 'btn-primary' in html
+
+def test_nested_components(cotton_render_string):
+    html = cotton_render_string(
+        "<c-ul><c-li text='first' /><c-li text='second' /></c-ul>"
+    )
+    assert 'first' in html
+    assert 'second' in html
+```
+
+### `cotton_render_string_soup` Fixture
+
+Combines `cotton_render_string` with BeautifulSoup parsing for easier DOM traversal and assertions on multi-component structures.
+
+```python
+def test_nested_list(cotton_render_string_soup):
+    soup = cotton_render_string_soup(
+        "<c-ul><c-li text='first' /><c-li text='second' /></c-ul>"
+    )
+    items = soup.find_all('li')
+    assert len(items) == 2
+    assert items[0].get_text() == 'first'
+
+def test_complex_layout(cotton_render_string_soup):
+    template = '''
+        <c-card>
+            <c-card.title>{{ title }}</c-card.title>
+            <c-card.body>
+                <c-button variant='primary'>{{ action }}</c-button>
+            </c-card.body>
+        </c-card>
+    '''
+    soup = cotton_render_string_soup(template, context={
+        'title': 'My Card',
+        'action': 'Click Here'
+    })
+    assert soup.find('h5').get_text() == 'My Card'
+    assert 'btn-primary' in soup.find('button')['class']
+```
+
+All fixtures automatically inject a request object, so you don't need to create one manually.
+
+## Contributing
+
+This library follows django-cotton conventions and Bootstrap 5 standards. When adding new components:
+
+1. Use `<c-vars />` for default values
+2. Include proper accessibility attributes
+3. Support all relevant Bootstrap 5 options
+4. Maintain consistent naming conventions
+5. Test with various configurations
+
+## License
+
+MIT License - see [LICENSE](LICENSE) file for details.

django_cotton_bs5-0.6.0/cotton_bs5/fixtures.py

@@ -0,0 +1,217 @@
+"""Pytest fixtures for testing Django Cotton BS5 components."""
+
+import pytest
+from bs4 import BeautifulSoup
+from django.template import Context, Template
+from django.test import RequestFactory
+from django_cotton import render_component
+from django_cotton.compiler_regex import CottonCompiler
+
+compiler = CottonCompiler()
+
+@pytest.fixture
+def cotton_render():
+    """
+    Fixture that renders Django-Cotton components and returns raw HTML.
+
+    Automatically provides a request object to be DRY. Component variables
+    are passed as kwargs.
+
+    Usage:
+        def test_something(cotton_render):
+            html = cotton_render(
+                'cotton_bs5.alert',
+                message="Hello",
+                type="success"
+            )
+            assert 'alert-success' in html
+    """
+    factory = RequestFactory()
+
+    def _render(component_name, context=None, **kwargs):
+        """
+        Render a Cotton component with automatic request injection.
+
+        Args:
+            component_name: Component name in dotted notation (e.g., "cotton_bs5.alert")
+            context: Optional context dict to pass as component attributes
+            **kwargs: Component attributes (alternative to context dict)
+
+        Returns:
+            Rendered HTML string
+        """
+        request = factory.get("/")
+        return render_component(request, component_name, context, **kwargs)
+
+    return _render
+
+
+@pytest.fixture
+def cotton_render_soup():
+    """
+    Fixture that renders Django-Cotton components and returns BeautifulSoup parsed HTML.
+
+    Automatically provides a request object and parses the result for easy testing.
+    Component variables are passed as kwargs.
+
+    Usage:
+        def test_something(cotton_render_soup):
+            soup = cotton_render_soup(
+                'cotton_bs5.alert',
+                message="Hello",
+                type="success"
+            )
+            assert soup.find('div')['class'] == ['alert', 'alert-success']
+    """
+    factory = RequestFactory()
+
+    def _render(component_name, context=None, **kwargs):
+        """
+        Render a Cotton component with automatic request injection and parse with BeautifulSoup.
+
+        Args:
+            component_name: Component name in dotted notation (e.g., "cotton_bs5.alert")
+            context: Optional context dict to pass as component attributes
+            **kwargs: Component attributes (alternative to context dict)
+
+        Returns:
+            BeautifulSoup parsed HTML object
+        """
+        request = factory.get("/")
+        html = render_component(request, component_name, context, **kwargs)
+        return BeautifulSoup(html, "html.parser")
+
+    return _render
+
+
+@pytest.fixture
+def cotton_render_string():
+    """
+    Fixture that compiles and renders Django template strings containing Cotton component syntax.
+
+    This fixture takes a raw template string with Cotton components (e.g., <c-button>),
+    compiles it through django-cotton's compiler, then renders it through Django's
+    Template system. Useful for testing inline component markup without creating
+    separate template files.
+
+    Usage:
+        def test_button_in_template(cotton_render_string):
+            html = cotton_render_string("<c-button variant='primary'>Click me</c-button>")
+            assert 'btn-primary' in html
+
+        def test_with_context(cotton_render_string):
+            html = cotton_render_string(
+                "<c-alert>{{ message }}</c-alert>",
+                context={'message': 'Hello World'}
+            )
+            assert 'Hello World' in html
+
+    Returns:
+        A callable function that accepts:
+            - template_string (str): Django template string with Cotton component syntax
+            - context (dict, optional): Template context variables
+
+        The function returns the rendered HTML as a string.
+    """
+    factory = RequestFactory()
+
+    def _render(template_string, context=None):
+        """
+        Compile and render a template string with Cotton components.
+
+        Args:
+            template_string: The Django template string containing Cotton component syntax
+            context: Optional context dict for template variables
+
+        Returns:
+            Rendered HTML string
+        """
+        if context is None:
+            context = {}
+        request = factory.get("/")
+        context['request'] = request
+
+        # Compile Cotton component syntax into Django template syntax
+        compiled_template = compiler.process(template_string)
+
+        # Render through Django's Template system
+        django_template = Template(compiled_template)
+        django_context = Context(context)
+        return django_template.render(django_context)
+
+    return _render
+
+
+@pytest.fixture
+def cotton_render_string_soup():
+    """
+    Fixture that compiles and renders Django template strings with Cotton components,
+    returning BeautifulSoup parsed HTML.
+
+    This fixture combines the capabilities of cotton_render_string with BeautifulSoup
+    parsing for easier DOM traversal and assertions. Particularly useful for testing
+    multi-component features where you need to verify nested structure and relationships.
+
+    Usage:
+        def test_nested_list(cotton_render_string_soup):
+            soup = cotton_render_string_soup(
+                "<c-ul><c-li text='first' /><c-li text='second' /></c-ul>"
+            )
+            items = soup.find_all('li')
+            assert len(items) == 2
+            assert items[0].get_text() == 'first'
+            assert items[1].get_text() == 'second'
+
+        def test_complex_layout_with_context(cotton_render_string_soup):
+            template = '''
+                <c-card>
+                    <c-card.title>{{ title }}</c-card.title>
+                    <c-card.body>
+                        <c-button variant='primary'>{{ action }}</c-button>
+                    </c-card.body>
+                </c-card>
+            '''
+            soup = cotton_render_string_soup(template, context={
+                'title': 'My Card',
+                'action': 'Click Here'
+            })
+            assert soup.find('h5').get_text() == 'My Card'
+            assert 'btn-primary' in soup.find('button')['class']
+
+    Returns:
+        A callable function that accepts:
+            - template_string (str): Django template string with Cotton component syntax
+            - context (dict, optional): Template context variables
+
+        The function returns a BeautifulSoup parsed HTML object.
+    """
+    factory = RequestFactory()
+
+    def _render(template_string, context=None):
+        """
+        Compile, render, and parse a template string with Cotton components.
+
+        Args:
+            template_string: The Django template string containing Cotton component syntax
+            context: Optional context dict for template variables
+
+        Returns:
+            BeautifulSoup parsed HTML object
+        """
+        if context is None:
+            context = {}
+        request = factory.get("/")
+        context['request'] = request
+
+        # Compile Cotton component syntax into Django template syntax
+        compiled_template = compiler.process(template_string)
+
+        # Render through Django's Template system
+        django_template = Template(compiled_template)
+        django_context = Context(context)
+        html = django_template.render(django_context)
+
+        # Parse with BeautifulSoup for easy DOM traversal
+        return BeautifulSoup(html, "html.parser")
+
+    return _render

{django_cotton_bs5-0.5.1 → django_cotton_bs5-0.6.0}/cotton_bs5/templates/cotton/accordion/index.html

@@ -1,4 +1,4 @@
-<c-vars flush parent class />
+<c-vars flush parent class id="something" />
 <div id="{{ id }}"
      class="accordion{% if flush %} accordion-flush{% endif %} {{ class }}"
      {{ attrs }}>

django_cotton_bs5-0.6.0/cotton_bs5/templates/cotton/accordion/item.html

@@ -0,0 +1,14 @@
+{% load cotton_bs5 %}
+<c-vars id text target header class show />
+{% cotton_parent as parent %}
+{% genid "accordion-item" as uid %}
+{% firstof id uid as target %}
+<div class="accordion-item {{ class }}" {{ attrs }}>
+  {% if text %}<c-accordion.header target="{{ target }}" :attrs="attrs" />{% endif %}
+  {{ header }}
+  <c-accordion.body id="{{ target }}"
+                    parent="{{ parent.id }}"
+                    :attrs="attrs">
+    {{ slot }}
+  </c-accordion.body>
+</div>

django_cotton_bs5-0.6.0/cotton_bs5/templates/cotton/breadcrumbs/item.html

@@ -0,0 +1,10 @@
+<c-vars text class />
+{% with element=href|yesno:"a,span" %}
+  {# djlint:off #}
+<li class="breadcrumb-item{% if element == 'span' %} active{% endif %} {{ class }}"{% if element == 'span' %} aria-current="page"{% endif %}>
+  <{{ element }}{% if href %} class="link-underline link-underline-opacity-0 link-underline-opacity-75-hover"{% endif %} {{ attrs }}>
+  {{ text }}{{ slot }}
+  </{{ element }}>
+</li>
+  {# djlint:on #}
+{% endwith %}

django_cotton_bs5-0.6.0/cotton_bs5/templates/cotton/button/index.html

@@ -0,0 +1,8 @@
+<c-vars variant="primary" size="" outline="" text class />
+{# djlint:off #}
+{% with element=href|yesno:"a,button" %}
+<{{ element }} class="btn{% if outline %} btn-outline-{{ variant }}{% else %} btn-{{ variant }}{% endif %}{% if size %} btn-{{ size }}{% endif %} {{ class }}" {{ attrs }}>
+  {{ slot }} {{ text }}
+</{{ element }}>
+{% endwith %}
+{# djlint:on #}

django_cotton_bs5-0.6.0/cotton_bs5/templates/cotton/cotton_bs5/document.html

@@ -0,0 +1,8 @@
+{% load cotton_bs5 %}
+<section id="{{ title|slugify }}">
+  <h2>{{ title }}</h2>
+  <p>{{ help }}</p>
+  {% show_code %}
+    {{ slot }}
+  {% endshow_code %}
+</section>

django_cotton_bs5-0.6.0/cotton_bs5/templates/cotton/dropdown/item.html

@@ -0,0 +1,6 @@
+<c-vars text active disabled class />
+{% with element=href|yesno:"a,button" %}
+  {# djlint:off #}
+<{{ element }} class="dropdown-item{% if active %} active{% endif %}{% if disabled %} disabled{% endif %}{% if class %} {{ class }}{% endif %}"{% if element == "button" %} type="button"{% endif %}{% if disabled %}{% if element == "a" %} tabindex="-1" aria-disabled="true"{% else %} disabled{% endif %}{% endif %} {{ attrs }}>{{ text }}{{ slot }}</{{ element }}>
+  {# djlint:on #}
+{% endwith %}

django_cotton_bs5-0.6.0/cotton_bs5/templates/cotton/grid/col.html

@@ -0,0 +1,5 @@
+<c-vars width="" :responsive="{}" offset="" gap=0 class />
+<div class="{% if width %}col-{{ width }}{% else %}col{% endif %}{% for bp, width in responsive.items %} col-{{ bp }}-{{ width }}{% endfor %} gap-{{ gap }} {{ class }}"
+     {{ attrs }}>
+        {{ slot }}
+</div>

django_cotton_bs5-0.6.0/cotton_bs5/templates/cotton/grid/index.html

@@ -0,0 +1,6 @@
+<c-vars cols=1 gap="1" sm md lg xl xxl class />
+<div class="row{% if cols %} row-cols-{{ cols }}{% endif %}{% if gap %} g-{{ gap }}{% endif %}{% if sm %} row-cols-sm-{{ sm }}{% endif %}{% if md %} row-cols-md-{{ sm }}{% endif %}{% if lg %} row-cols-lg-{{ lg }}{% endif %}{% if xl %} row-cols-xl-{{ xl }}{% endif %}{% if xl %} row-cols-xl-{{ xl }}{% endif %}{% if xxl %} row-cols-xxl-{{ xxl }}{% endif %}{{ class }}"
+     {{ attrs }}>
+  {{ slot }}
+</div>
+

django_cotton_bs5-0.6.0/cotton_bs5/templates/cotton/hstack.html

@@ -0,0 +1,4 @@
+<c-vars gap=1 class />
+<div class="hstack gap-{{ gap }} {{ class }}"
+     {{ attrs }}>{{ slot }}
+</div>

{django_cotton_bs5-0.5.1 → django_cotton_bs5-0.6.0}/cotton_bs5/templates/cotton/list_group/index.html

@@ -3,9 +3,11 @@
         :horizontal="False"
         class />
 {# djlint:off #}
-<{% if numbered %}ol{% else %}ul{% endif %}
-class="list-group{% if flush %} list-group-flush{% endif %}{% if horizontal %} list-group-horizontal{% if horizontal != True %}-{{ horizontal }}{% endif %}{% endif %}{{ class }}"
+{% with numbered|yesno:"ol,ul" as element %}
+<{{ element }}
+class="list-group{% if flush %} list-group-flush{% endif %}{% if horizontal %} list-group-horizontal{% if horizontal != True %}-{{ horizontal }}{% endif %}{% endif %} {{ class }}"
 {{ attrs }}>
 {{ slot }}
-</{% if numbered %}ol{% else %}ul{% endif %}>
+</{{ element }}>
+{% endwith %}
 {# djlint:on #}

django_cotton_bs5-0.6.0/cotton_bs5/templates/cotton/list_group/item.html

@@ -0,0 +1,8 @@
+<c-vars text active disabled variant class />
+{# djlint:off #}
+{% with element=href|yesno:"a,li" %}
+<{{ element }} class="list-group-item{% if href %} list-group-item-action{% endif %}{% if active %} active{% elif disabled %} disabled{% endif %}{% if variant %} list-group-item-{{ variant }}{% endif %} {{ class }}"{% if active %} aria-current="true"{% elif disabled %} aria-disabled="true"{% endif %} {{ attrs }}>
+  {{ text }}{{ slot }}
+</{{ element }}>
+{% endwith %}
+{# djlint:on #}

django_cotton_bs5-0.6.0/cotton_bs5/templates/cotton/nav/item.html

@@ -0,0 +1,4 @@
+<c-vars class link_class />
+<li class="nav-item {{ class }}">
+  <c-nav.link :attrs="attrs" class="{{ link_class }}" />
+</li>

django_cotton_bs5-0.6.0/cotton_bs5/templates/cotton/vstack.html

@@ -0,0 +1,4 @@
+<c-vars gap=1 class />
+<div class="vstack gap-{{ gap }} {{ class }}"
+     {{ attrs }}>{{ slot }}
+</div>