Merge branch '1-adaptacao-dos-componentes-do-design-system-do-govbr-para-django' into 'master'

Resolve "Adaptação dos componentes do design system do GovBR para django"

Closes #1

See merge request !1

tests/django_dsgov_test1/templates/examples_headers.html

+{% extends "dsgov/base.html" %}
+{% load br_components %}
+{% load static %}
+
+{% block title %}
+    Exemplo de Headers
+{% endblock %}
+
+{% block content %}
+    <div class="container">
+        {% static '/dsgov/images/logo.png' as logo_path %}
+        {% br_header title="Universidade Federal Rural de Pernambuco" logo_url=logo_path links=lista extra_classes="bg-blue-warm-vivid-90" links_style="color: #FFFFFF;" title_extra="UFRPE" title_style="color: #FFFFFF;" items_style="color: #FFFFFF;" search_placeholder="O que você procura?" label_button_login="Entrar" header_sign_style="color: #FFFFFF; font-weight: bold;" %}
+    </div>
+{% endblock %}

tests/django_dsgov_test1/templates/examples_inputs.html

+{% extends "dsgov/base.html" %}
+{% load br_components %}
+{% load static %}
+
+{% block title %}
+    Exemplo de Inputs
+{% endblock %}
+
+{% block content %}
+    <div class="container">
+        <!-- Input padrão -->
+        <div class="col-sm-8 col-lg-5">
+            <div class="input-default"> 
+                {% br_input input_type="text" placeholder="Placeholder" label="Label/Rótulo" input_id="input-default" extra_classes="" help_text="Texto auxiliar. Função de previnir erros." %}
+            </div>
+        </div>
+
+        <!-- Input com densidades -->
+        <div class="col-sm-4 col-lg-3 mb-3">
+            {% br_input input_type="text" placeholder="Placeholder" label="Densidade padrão" input_id="input-medium" extra_classes="" %}
+        </div>
+        <div class="col-sm-4 col-lg-3 mb-3">
+            {% br_input input_type="text" placeholder="Placeholder" label="Alta densidade" input_id="input-small" density="small" extra_classes="" %}
+        </div>
+        <div class="col-sm-4 col-lg-3 mb-3">
+            {% br_input input_type="text" placeholder="Placeholder" label="Baixa densidade" input_id="input-large" density="large" extra_classes="" %}
+        </div>
+
+        <!-- Input com ícones -->
+        <div class="col-sm-6 col-lg-4 mb-3">
+            {% br_input input_type="text" placeholder="Placeholder" label="Login" input_id="input-medium" extra_classes="" icon_class="fas fa-user-tie" %}
+        </div>
+        <div class="col-sm-6 col-lg-4 mb-3">
+            {% br_input input_type="text" placeholder="Placeholder" label="Alta densidade" input_id="input-small" density="small" extra_classes="" icon_class="fas fa-user" %}
+        </div>
+        <div class="col-sm-6 col-lg-4 mb-3">
+            {% br_input input_type="text" placeholder="Placeholder" label="Baixa densidade" input_id="input-large" density="large" extra_classes="" icon_class="fas fa-users" %}
+        </div>
+        
+    </div>
+{% endblock %}

tests/django_dsgov_test1/templates/examples_list.html

+{% extends "dsgov/base.html" %}
+{% load br_components %}
+{% load static %}
+
+{% block title %}
+    Exemplo de Lista
+{% endblock %}
+
+{% block content %}
+    <div class="container">
+        {% br_list title="Minha Lista" items=lista %}
+    </div>
+{% endblock %}

tests/django_dsgov_test1/templates/examples_menu.html

+{% extends "dsgov/base.html" %}
+{% load br_components %}
+{% load static %}
+
+{% block title %}
+    Exemplo de Menu
+{% endblock %}
+
+{% block content %}
+    <div class="container">
+        {% br_menu %}
+    </div>
+{% endblock %}

tests/django_dsgov_test1/templates/examples_tag.html

+{% extends "dsgov/base.html" %}
+{% load br_components %}
+{% load static %}
+
+{% block title %}
+    Exemplo de Tag
+{% endblock %}
+
+{% block content %}
+    <div class="container mt-5"> 
+        <div class="d-flex align-items-center">
+            {% br_tag extra_classes="mr-3" close_button=True close_icon_class="fas fa-times" icon_class="fas fa-car" tag_text="Carro 1" tag_id="interaction01" %}
+            {% br_tag extra_classes="mr-3" close_button=True close_icon_class="fas fa-times" icon_class="fas fa-bicycle" tag_text="Bicicleta 1" tag_id="interaction02" %}
+            {% br_tag extra_classes="mr-3" close_button=True close_icon_class="fas fa-times" icon_class="fas fa-motorcycle" tag_text="Moto 1" tag_id="interaction03" %}
+        </div>
+
+        <div class="d-flex align-items-center mt-3">
+            {% br_tag icon_class="fas fa-car" tag_text="Texto e ícone" tag_id="tag02" extra_classes="bg-mint-cool-vivid-70 mr-3" %}
+            {% br_tag tag_text="Texto" tag_id="tag02" extra_classes="bg-violet-warm-vivid-70 mr-3" %}
+        </div>
+
+        <div class="d-flex align-items-center mt-3">
+            {% br_tag tag_text="Alta" tag_id="densidade01" extra_classes="bg-orange-vivid-50 mr-3" density="small" %}
+            {% br_tag tag_text="Padrão" tag_id="densidade02" extra_classes="bg-green-warm-vivid-50 mr-3" density="medium" %}
+            {% br_tag tag_text="Baixa" tag_id="densidade03" extra_classes="bg-indigo-warm-vivid-50 mr-3" density="large" %}
+        </div>
+    </div>
+{% endblock %}
\ No newline at end of file

tests/django_dsgov_test1/templates/index.html

+{% extends "dsgov/base.html" %}
+{% load br_components %}
+{% load static %}
+
+{% block title %}
+    Componentes Django-DsGOV
+{% endblock %}
+
+{% block content %}
+    <div class="container">
+        <div class="br-list" role="list">
+            <div class="header">
+                <div class="title">
+                    Visualize nossos componentes
+                </div>
+            </div><span class="br-divider"></span>
+            <div class="br-item" role="listitem">
+                <div class="row align-items-center">
+                    <div class="col-auto">
+                        <i class="fa-solid fa-play" aria-hidden="true"></i>
+                    </div>
+                    <div class="col">
+                        <a href="{% url 'buttons' %}">Exemplos de Botões</a>
+                    </div>
+                </div>
+            </div>
+            <div class="br-item" role="listitem">
+                <div class="row align-items-center">
+                    <div class="col-auto">
+                        <i class="fa-solid fa-keyboard" aria-hidden="true"></i>
+                    </div>
+                    <div class="col">
+                        <a href="{% url 'inputs' %}">Exemplos de Inputs</a>
+                    </div>
+                </div>
+            </div>
+            <div class="br-item" role="listitem">
+                <div class="row align-items-center">
+                    <div class="col-auto">
+                        <i class="fa-solid fa-heading" aria-hidden="true"></i>
+                    </div>
+                    <div class="col">
+                        <a href="{% url 'headers' %}">Exemplos de Headers</a>
+                    </div>
+                </div>
+            </div>
+            <div class="br-item" role="listitem">
+                <div class="row align-items-center">
+                    <div class="col-auto">
+                        <i class="fa-solid fa-shoe-prints" aria-hidden="true"></i>
+                    </div>
+                    <div class="col">
+                        <a href="{% url 'footer' %}">Exemplos de Footers</a>
+                    </div>
+                </div>
+            </div>
+            <div class="br-item" role="listitem">
+                <div class="row align-items-center">
+                    <div class="col-auto">
+                        <i class="fas fa-image" aria-hidden="true"></i>
+                    </div>
+                    <div class="col">
+                        <a href="{% url 'carousel' %}">Exemplos de Carousel</a>
+                    </div>
+                </div>
+            </div>
+            <div class="br-item" role="listitem">
+                <div class="row align-items-center">
+                    <div class="col-auto">
+                        <i class="fas fa-bars" aria-hidden="true"></i>
+                    </div>
+                    <div class="col">
+                        <a href="{% url 'menu' %}">Exemplos de Menu</a>
+                    </div>
+                </div>
+            </div>
+            <div class="br-item" role="listitem">
+                <div class="row align-items-center">
+                    <div class="col-auto">
+                        <i class="fa-solid fa-list" aria-hidden="true"></i>
+                    </div>
+                    <div class="col">
+                        <a href="{% url 'list' %}">Exemplos de List</a>
+                    </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 'breadcrumb' %}">Exemplos de Breadcrumb</a>
+                    </div>
+                </div>
+            </div>
+            <div class="br-item" role="listitem">
+                <div class="row align-items-center">
+                    <div class="col-auto">
+                        <i class="fa-solid fa-tag" aria-hidden="true"></i>
+                    </div>
+                    <div class="col">
+                        <a href="{% url 'tag' %}">Exemplos de Tags</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+{% endblock %}