Merge branch 'master' of http://interno.gitlab.ufrpe.br/websites-ufrpe/django-dsgov

dsgov/templates/dsgov/components/list.html

@@ -5,11 +5,12 @@
 {% block content %}
     <div class="br-list" role="list">
         <div class="header">
-            <div class="title">{{ title }}</div>
+            <div class="title">{{ title|default:"Título padrão" }}</div>
         </div>
         <span class="br-divider"></span>
+        {% if items %}
             {% for item in items %}
-            <div class="br-item" role="listitem">
+                <div class="br-item py-3" role="listitem">
                     <div class="row align-items-center">
                         <div class="col-auto">
                             <i class="{{ item.icon }}" aria-hidden="true"></i>
@@ -18,6 +19,33 @@
                         <div class="col-auto">{{ item.meta }}</div>
                     </div>
                 </div>
+                <span class="br-divider"></span>
             {% endfor %}
+        {% else %}
+            <div class="br-item py-3" role="listitem">
+                <div class="row align-items-center">
+                    <div class="col-auto"><i class="fas fa-heartbeat" aria-hidden="true"></i></div>
+                    <div class="col">Texto principal</div>
+                    <div class="col-auto">META</div>
+                </div>
+            </div>
+            <span class="br-divider"></span>
+            <div class="br-item py-3" role="listitem">
+                <div class="row align-items-center">
+                    <div class="col-auto"><i class="fas fa-heartbeat" aria-hidden="true"></i></div>
+                    <div class="col">Texto principal</div>
+                    <div class="col-auto">META</div>
+                </div>
+            </div>
+            <span class="br-divider"></span>
+            <div class="br-item py-3" role="listitem">
+                <div class="row align-items-center">
+                    <div class="col-auto"><i class="fas fa-heartbeat" aria-hidden="true"></i></div>
+                    <div class="col">Texto principal</div>
+                    <div class="col-auto">META</div>
+                </div>
+            </div>
+            <span class="br-divider"></span>
+        {% endif %}
     </div>
 {% endblock %}

dsgov/templates/dsgov/components/pagination.html

@@ -3,45 +3,63 @@
 {% load static %}
 
 {% block content %}
-    <nav class="br-pagination" aria-label="paginação" data-total="10" data-current="1">
+   <nav class="br-pagination d-none d-sm-flex" aria-label="paginação" data-total="50" data-current="1">
   <ul>
+    <!-- Botão voltar -->
     <li>
       <button class="br-button circle" type="button" data-previous-page="data-previous-page" aria-label="Voltar página">
         <i class="fas fa-angle-left" aria-hidden="true"></i>
       </button>
     </li>
-            <li>
-                <a class="page active" href="javascript:void(0)" aria-label=" página 1">1</a>
-            </li>
-            <li>
-                <a class="page" href="javascript:void(0)" aria-label=" página 2">2</a>
-            </li>
-            <li>
-                <a class="page" href="javascript:void(0)" aria-label=" página 3">3</a>
-            </li>
-            <li>
-                <a class="page" href="javascript:void(0)" aria-label=" página 4">4</a>
-            </li>
+
+    <!-- Primeiras páginas -->
+    <li><a class="page active" href="javascript:void(0)" aria-label="Página 1">1</a></li>
+    <li><a class="page" href="javascript:void(0)" aria-label="Página 2">2</a></li>
+    <li><a class="page" href="javascript:void(0)" aria-label="Página 3">3</a></li>
+
+    <!-- Primeiro ellipsis (páginas 4–20) -->
     <li class="pagination-ellipsis">
-                <button class="br-button circle" type="button" data-toggle="dropdown" aria-label="Abrir ou fechar a lista de paginação">
+      <button class="br-button circle" type="button" data-toggle="dropdown" aria-label="Abrir lista de páginas">
         <i class="fas fa-ellipsis-h" aria-hidden="true"></i>
       </button>
       <div class="br-list" role="menu">
-                    <a class="br-item" href="javascript:void(0)" aria-label=" página 5" role="menuitem">5</a>
-                    <a class="br-item" href="javascript:void(0)" aria-label=" página 6" role="menuitem">6</a>
-                    <a class="br-item" href="javascript:void(0)" aria-label=" página 7" role="menuitem">7</a>
-                    <a class="br-item" href="javascript:void(0)" aria-label=" página 8" role="menuitem">8</a>
-                    <a class="br-item" href="javascript:void(0)" aria-label=" página 9" role="menuitem">9</a>
+        <a class="br-item" href="javascript:void(0)" role="menuitem">4</a>
+        <a class="br-item" href="javascript:void(0)" role="menuitem">5</a>
+        ...
+        <a class="br-item" href="javascript:void(0)" role="menuitem">20</a>
       </div>
     </li>
-            <li>
-                <a class="page" href="javascript:void(0)" aria-label=" página 10">10</a>
+
+    <!-- Algumas páginas intermediárias -->
+    <li><a class="page" href="javascript:void(0)" aria-label="Página 21">21</a></li>
+    <li><a class="page" href="javascript:void(0)" aria-label="Página 22">22</a></li>
+    <li><a class="page" href="javascript:void(0)" aria-label="Página 23">23</a></li>
+
+    <!-- Segundo ellipsis (páginas 24–46) -->
+    <li class="pagination-ellipsis">
+      <button class="br-button circle" type="button" data-toggle="dropdown" aria-label="Abrir lista de páginas">
+        <i class="fas fa-ellipsis-h" aria-hidden="true"></i>
+      </button>
+      <div class="br-list" role="menu">
+        <a class="br-item" href="javascript:void(0)" role="menuitem">24</a>
+        <a class="br-item" href="javascript:void(0)" role="menuitem">25</a>
+        ...
+        <a class="br-item" href="javascript:void(0)" role="menuitem">46</a>
+      </div>
     </li>
+
+    <!-- Últimas páginas -->
+    <li><a class="page" href="javascript:void(0)" aria-label="Página 47">47</a></li>
+    <li><a class="page" href="javascript:void(0)" aria-label="Página 48">48</a></li>
+    <li><a class="page" href="javascript:void(0)" aria-label="Página 49">49</a></li>
+    <li><a class="page" href="javascript:void(0)" aria-label="Página 50">50</a></li>
+
+    <!-- Botão avançar -->
     <li>
-                <button class="br-button circle" type="button" data-next-page="data-next-page" aria-label="Página seguinte">
+      <button class="br-button circle" type="button" data-next-page="data-next-page" aria-label="Próxima página">
         <i class="fas fa-angle-right" aria-hidden="true"></i>
       </button>
     </li>
   </ul>
-    </nav>
+</nav>
 {% endblock %}
\ No newline at end of file

dsgov/templatetags/br_components.py

@@ -2,7 +2,7 @@ from django import template
 from django.utils.html import format_html
 from django.templatetags.static import static
 from django.template.loader import render_to_string
-from urllib.parse import urlencode, parse_qs
+from ..utils import build_page_url
 
 register = template.Library()
 
@@ -22,6 +22,7 @@ def br_stylesheets():
         static('dsgov/fonts/rawline/css/rawline.css')
     )
 
+
 @register.simple_tag
 def br_scripts():
     """
@@ -35,6 +36,7 @@ def br_scripts():
         static('dsgov/dist/js/bundle.js')
     )
 
+
 @register.simple_tag
 def br_button(text='', button_type='', style='', extra_classes='', icon_class=''):
     """
@@ -47,6 +49,7 @@ def br_button(text='', button_type='', style='', extra_classes='', icon_class=''
     icon_html = format_html('<i class="{}" aria-hidden="true"></i>', icon_class) if icon_class else ''
     return format_html('<button type="{}" class="{}">{}{}</button>', button_type, classes, icon_html, text)
 
+
 @register.simple_tag
 def br_tag(tag_text="", tag_id="", icon_class="", close_button="", close_icon_class="", button_extra_classes="", extra_classes="", density=""):
     """
@@ -70,6 +73,7 @@ def br_tag(tag_text="", tag_id="", icon_class="", close_button="", close_icon_cl
     )
     return format_html('<div class="d-flex align-items-center flex-wrap gap-2">{}</div>', tag_html)
 
+
 @register.simple_tag
 def br_input(input_type="", placeholder="", label="", input_id="", help_text="" ,extra_classes="", density="" , icon_class="", disabled=False, readonly=False, value=""):
     """
@@ -101,6 +105,7 @@ def br_input(input_type="", placeholder="", label="", input_id="", help_text=""
         classes, label_html=label_html, input_html=input_html, help_text_html=help_text_html
     )
 
+
 @register.simple_tag
 def br_list(title, items):
     """
@@ -113,6 +118,7 @@ def br_list(title, items):
     }
     return render_to_string("dsgov/components/list.html", context)
 
+
 @register.inclusion_tag("dsgov/components/breadcrumb.html")
 def br_breadcrumb(items=None, current_title=""):
     """
@@ -125,46 +131,85 @@ def br_breadcrumb(items=None, current_title=""):
         "current_title": current_title,
     }
 
-@register.simple_tag
-def br_pagination(total_pages=1, current_page=1, base_url="?page=", extra_params=""):
+
+@register.simple_tag(takes_context=True)
+def br_pagination(context, total_pages=None, current_page=None, extra_params=""):
     """
-    Renderiza um componente de paginação DSGov preservando parâmetros GET.
-    Uso no template:
-        {% br_pagination total_pages=noticias.paginator.num_pages current_page=noticias.number base_url="?page=" extra_params=request.GET.urlencode %}
-    Os valores default garantem funcionamento básico, mas todos os parâmetros podem ser editados manualmente no template.
+    Renderiza paginação DSGov.
+
+    - Funciona em Django puro e Django + Wagtail.
+    - Recebe `total_pages` e `current_page` do contexto.
+    - Mantém parâmetros da URL e adiciona `extra_params` se houver.
     """
-    # Garantindo limites
+    request = context["request"]
+
+    if not total_pages or not current_page:
+        return render_to_string("dsgov/components/pagination.html", context.flatten())
+
     total_pages = int(total_pages)
     current_page = int(current_page)
-    # --- Tratamento dos parâmetros extras ---
-    params = parse_qs(extra_params) if extra_params else {}
-    params.pop("page", None)
-    # Reconstroi querystring
-    querystring = "&" + urlencode(params, doseq=True) if params else ""
-    # --- Links de navegação ---
+
+    # links prev/next
     prev_disabled = "disabled" if current_page <= 1 else ""
-    prev_link = (
-        f'{base_url}{current_page-1}{querystring}'
-        if current_page > 1 else "javascript:void(0)"
-    )
     next_disabled = "disabled" if current_page >= total_pages else ""
-    next_link = (
-        f'{base_url}{current_page+1}{querystring}'
-        if current_page < total_pages else "javascript:void(0)"
-    )
-    # --- Lista de páginas ---
-    pages_html = ""
-    for num in range(1, total_pages + 1):
-        active_class = "active" if num == current_page else ""
-        pages_html += f"""
+    prev_link = build_page_url(request, current_page - 1, extra_params) if current_page > 1 else "javascript:void(0)"
+    next_link = build_page_url(request, current_page + 1, extra_params) if current_page < total_pages else "javascript:void(0)"
+
+    def page_link(num, active=False):
+        active_class = "active" if active else ""
+        url = build_page_url(request, num, extra_params)
+        return f"""
             <li>
-                <a class="page {active_class}" href="{base_url}{num}{querystring}" aria-label="página {num}">{num}</a>
+              <a class="page {active_class}" href="{url}" aria-label="Página {num}">{num}</a>
+            </li>
+        """
+
+    def ellipsis_block(start, end):
+        items = "".join(
+            f'<a class="br-item" href="{build_page_url(request, n, extra_params)}" role="menuitem">{n}</a>'
+            for n in range(start, end + 1)
+        )
+        return f"""
+            <li class="pagination-ellipsis">
+              <button class="br-button circle" type="button" data-toggle="dropdown" aria-label="Abrir ou fechar a lista de paginação">
+                <i class="fas fa-ellipsis-h" aria-hidden="true"></i>
+              </button>
+              <div class="br-list" role="menu">
+                {items}
+              </div>
             </li>
         """
-    # --- HTML final ---
+
+    # Constrói números de página
+    pages_html = page_link(1, active=(current_page == 1))
+
+    if total_pages <= 7:
+        for num in range(2, total_pages + 1):
+            pages_html += page_link(num, active=(current_page == num))
+    else:
+        if current_page <= 4:
+            for num in range(2, 6):
+                pages_html += page_link(num, active=(current_page == num))
+            if total_pages > 6:
+                pages_html += ellipsis_block(6, total_pages - 1)
+        elif current_page >= total_pages - 3:
+            if total_pages > 6:
+                pages_html += ellipsis_block(2, total_pages - 5)
+            for num in range(total_pages - 4, total_pages):
+                pages_html += page_link(num, active=(current_page == num))
+        else:
+            pages_html += ellipsis_block(2, current_page - 2)
+            for num in range(current_page - 1, current_page + 2):
+                pages_html += page_link(num, active=(current_page == num))
+            pages_html += ellipsis_block(current_page + 2, total_pages - 1)
+
+    # Adiciona a última página somente se ainda não estiver incluída
+    if total_pages > 1 and (pages_html.find(f'aria-label="Página {total_pages}"') == -1):
+        pages_html += page_link(total_pages, active=(current_page == total_pages))
+
     return format_html(
         """
-        <nav class="br-pagination" aria-label="paginação" data-total="{total}" data-current="{current}">
+        <nav class="br-pagination d-none d-sm-flex" aria-label="paginação" data-total="{total}" data-current="{current}">
           <ul>
             <li>
               <a class="br-button circle {prev_disabled}" href="{prev_link}" aria-label="Voltar página">
@@ -189,6 +234,7 @@ def br_pagination(total_pages=1, current_page=1, base_url="?page=", extra_params
         pages=format_html(pages_html),
     )
 
+
 @register.simple_tag(takes_context=True)
 def br_search(context, placeholder="Buscar...", input_id="search-input", btn_label="Buscar", input_name="q"):
     """
@@ -217,6 +263,7 @@ def br_search(context, placeholder="Buscar...", input_id="search-input", btn_lab
         val=value
     )
 
+
 @register.simple_tag
 def br_card(title='', text='', icon_class=None, icon_extra_class="", icon_style="", title_class="mt-0 mb-1 text-primary", title_style="font-family: 'Noto Sans', sans-serif;", text_class="text-gray-700", text_style="font-family: 'Noto Sans', sans-serif; color:#5C5C5C;"):
     """

dsgov/templatetags/br_header_tags.py

@@ -116,9 +116,9 @@ class BRHeaderLoginNode(template.Node):
         return format_html('<div class="header-login">{}</div>', mark_safe(content))
 
 # Tag: br_list
-@register.tag(name='br_list')
-def do_br_list(parser, token):
-    nodelist = parser.parse(('end_br_list',))
+@register.tag(name='br_list_generic')
+def do_br_list_generic(parser, token):
+    nodelist = parser.parse(('end_br_list_generic',))
     parser.delete_first_token()
     return BRListNode(nodelist)
 
@@ -452,7 +452,7 @@ def br_header_search(context, placeholder="O que você procura?", icon_style="",
     """
 
     # Resolve estilos
-    icon_style_attr = f' style="{icon_style}"' if icon_style else ""
+    icon_style_attr = format_html(' style="{}"', icon_style) if icon_style else ""
 
     # Resolve URL de destino da busca
     if action_url is None:
@@ -501,15 +501,22 @@ def br_header_search_trigger(context, icon_style=""):
     )
 
 @register.simple_tag
-def br_header_signin_button():
+def br_header_login_button(url="#"):
+    """
+    Renderiza o botão de login + avatar, conforme o padrão DSGov.
+    
+    Argumentos:
+        url (str): Link para onde o botão deve redirecionar.
+                   Padrão: "#" (não faz nada).
+    """
     return mark_safe(
-        '''<div class="header-sign-in">
-            <button class="br-sign-in small" type="button" data-trigger="login">
-                <i class="fas fa-user" aria-hidden="true"></i><span class="d-sm-inline">Entrar</span>
-            </button>
-        </div>'''
+        f"""
+        <div class="header-sign-in">
+          <a href="{url}" class="br-sign-in small">
+            <i class="fas fa-user" aria-hidden="true"></i>
+            <span class="d-sm-inline">Entrar</span>
+          </a>
+        </div>
+        <div class="header-avatar"></div>
+        """
     )
-
-@register.simple_tag
-def br_header_avatar():
-    return mark_safe('<div class="header-avatar"></div>')

dsgov/utils.py

+from urllib.parse import urlencode, parse_qs
+
+def build_page_url(request, page_num, extra_params=None):
+    """
+    Monta uma URL de paginação baseada na request atual, sobrescrevendo `page`.
+
+    - Mantém os parâmetros existentes da URL.
+    - Remove qualquer `page` anterior.
+    - Aceita `extra_params` como string no formato querystring (ex: "busca=lapis&categoria=arte").
+    """
+    # começa com os params atuais
+    params = request.GET.copy()
+
+    # remove page atual
+    params.pop("page", None)
+
+    # adiciona extra_params se houver
+    if extra_params:
+        parsed_extra = parse_qs(extra_params, keep_blank_values=True)
+        parsed_extra.pop("page", None)
+        for key, values in parsed_extra.items():
+            params.setlist(key, values)
+
+    # sobrescreve page
+    params["page"] = page_num
+
+    return f"{request.path}?{urlencode(params, doseq=True)}"

tests/django_dsgov_test1/templates/examples_headers.html

@@ -31,30 +31,29 @@
 
       {% br_header_actions %}
         {% br_header_links %}
-          {% br_list %}
+          {% br_list_generic %}
             {% br_list_header %}Acesso Rápido{% end_br_list_header %}
             {% br_header_link_item href="https://www.google.com/" %}Link de acesso 1{% end_br_header_link_item %}
             {% br_header_link_item href="#" %}Link de acesso 2{% end_br_header_link_item %}
             {% br_header_link_item href="#" %}Link de acesso 3{% end_br_header_link_item %}
             {% br_header_link_item href="#" %}Link de acesso 4{% end_br_header_link_item %}
-          {% end_br_list %}
+          {% end_br_list_generic %}
         {% end_br_header_links %}
 
         {% br_header_functions %}
-          {% br_list %}
+          {% br_list_generic %}
             {% br_list_header %}Funcionalidades do Sistema{% end_br_list_header %}
             {% br_function_item href="https://www.google.com/" icon_class="fa-chart-bar" label="Funcionalidade 1" %}
             {% br_function_item icon_class="fa-headset" label="Funcionalidade 2" %}
             {% br_function_item icon_class="fa-comment" label="Funcionalidade 3" %}
             {% br_function_item icon_class="fa-adjust" label="Funcionalidade 4" %}
-          {% end_br_list %}
+          {% end_br_list_generic %}
         {% end_br_header_functions %}
 
         {% br_header_search_trigger %}
 
         {% br_header_login %}
-          {% br_header_signin_button %}
-          {% br_header_avatar %}
+          {% br_header_login_button url="https://www.gov.br/pt-br" %}
         {% end_br_header_login %}
       {% end_br_header_actions %}
     {% end_br_header_top %}
@@ -83,31 +82,30 @@
     {% br_header_actions %}
       {% br_header_links icon_style="color: white;" %}
         {# ESTRUTURA CORRIGIDA: br_list agora envolve o header e os itens #}
-        {% br_list %}
+        {% br_list_generic %}
           {% br_list_header style="color: white;" %}Acesso Rápido{% end_br_list_header %}
           {% br_header_link_item href="#" extra_classes="bg-blue-warm-vivid-90" style="color: white;" %}Link de acesso 1{% end_br_header_link_item %}
           {% br_header_link_item href="#" extra_classes="bg-blue-warm-vivid-90" style="color: white;" %}Link de acesso 2{% end_br_header_link_item %}
           {% br_header_link_item href="#" extra_classes="bg-blue-warm-vivid-90" style="color: white;" %}Link de acesso 3{% end_br_header_link_item %}
           {% br_header_link_item href="#" extra_classes="bg-blue-warm-vivid-90" style="color: white;" %}Link de acesso 4{% end_br_header_link_item %}
-        {% end_br_list %}
+        {% end_br_list_generic %}
       {% end_br_header_links %}
 
       {% br_header_functions icon_style="color: white;" %}
         {# ESTRUTURA CORRIGIDA: br_list agora envolve o header e os itens #}
-        {% br_list %}
+        {% br_list_generic %}
           {% br_list_header style="color: white;" %}Funcionalidades do Sistema{% end_br_list_header %}
           {% br_function_item icon_class="fa-chart-bar" extra_classes="bg-blue-warm-vivid-90" icon_style="color: white;" label="Funcionalidade 1" label_style="color: white;" aria_label="Acessível" %}
           {% br_function_item icon_class="fa-headset" extra_classes="bg-blue-warm-vivid-90" icon_style="color: white;" label="Funcionalidade 2" label_style="color: white;" aria_label="Acessível" %}
           {% br_function_item icon_class="fa-comment" extra_classes="bg-blue-warm-vivid-90" icon_style="color: white;" label="Funcionalidade 3" label_style="color: white;" aria_label="Acessível" %}
           {% br_function_item icon_class="fa-adjust" extra_classes="bg-blue-warm-vivid-90" icon_style="color: white;" label="Funcionalidade 4" label_style="color: white;" aria_label="Acessível" %}
-        {% end_br_list %}
+        {% end_br_list_generic %}
       {% end_br_header_functions %}
 
       {% br_header_search_trigger icon_style="color: white;" %}
       
       {% br_header_login %}
-        {% br_header_signin_button %}
-        {% br_header_avatar %}
+        {% br_header_login_button url="https://www.gov.br/pt-br" %}
       {% end_br_header_login %}
     {% end_br_header_actions %}
   {% end_br_header_top %}

tests/django_dsgov_test1/templates/examples_pagination.html

@@ -8,6 +8,7 @@
 
 {% block content %}
     <div class="container">
+        <br><br>
         {% br_pagination %}
     </div>
 {% endblock %}
\ No newline at end of file

tests/django_dsgov_test1/templates/index.html

@@ -122,16 +122,6 @@
                     </div>
                 </div>
             </div>
-            <div class="br-item" role="listitem">
-                <div class="row align-items-center">
-                    <div class="col-auto">
-                        <i class="fa-solid fa-sitemap" aria-hidden="true"></i>
-                    </div>
-                    <div class="col">
-                        <a href="{% url 'cards' %}">Exemplos de Cards com Ícones</a>
-                    </div>
-                </div>
-            </div>
         </div>
     </div>
 {% endblock %}