diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_checkbox.html b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_checkbox.html
index 3f75b1e932611e2e57489ccff88f88ebdbf7e351..9f83952edecdcc676365de6632aba0fa1adead9a 100644
--- a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_checkbox.html
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_checkbox.html
@@ -1,4 +1,4 @@
-<div class="checkbox form-field__control flex items-center {{ classes }}">
- <input type="checkbox" id="checkbox_1">
- <label for="checkbox_1">{{ label }}</label>
+<div class="form__checkbox flex items-center {{ classes }}">
+ <input type="form__checkbox" id="{{ id }}">
+ <label for="{{ id }}">{{ label }}</label>
</div>
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_checkbox.yaml b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_checkbox.yaml
index 99b12507c573553fd9d7d4a2482215fb2510bc7b..05dae7d3c43f7c26d0c030763ba8eb2818a6fdd9 100644
--- a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_checkbox.yaml
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_checkbox.yaml
@@ -1,3 +1,4 @@
context:
classes: ''
label: 'Souhlasím se zpracováním osobních údajů'
+ id: 'checkbox_1'
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_date.html b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_date.html
new file mode 100644
index 0000000000000000000000000000000000000000..e3be8615874d7aa09d136cc07303662054748cc6
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_date.html
@@ -0,0 +1,3 @@
+{% extends "patterns/atoms/form_fields/form_input.html" %}
+
+{% block type %}date{% endblock %}
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_date.yaml b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_date.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..5a447b557e96bddd19a6fac5ffebd6c495b092ac
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_date.yaml
@@ -0,0 +1,6 @@
+context:
+ label: 'Datum narození'
+ placeholder: ''
+ hint: ''
+ is_required: true
+ id: 'date_1'
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_datetime.html b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_datetime.html
new file mode 100644
index 0000000000000000000000000000000000000000..4b7c6aa31009c37fdd2cf5d814c761f9685c297f
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_datetime.html
@@ -0,0 +1,3 @@
+{% extends "patterns/atoms/form_fields/form_input.html" %}
+
+{% block type %}datetime-local{% endblock %}
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_datetime.yaml b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_datetime.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..3fcd97a6346eff78d2a4edaf135b7a282560d987
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_datetime.yaml
@@ -0,0 +1,6 @@
+context:
+ label: 'Datum a čas poslední injekce'
+ placeholder: ''
+ hint: ''
+ is_required: true
+ id: 'datetime_1'
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_email.html b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_email.html
new file mode 100644
index 0000000000000000000000000000000000000000..899211358389444633ef8a99e61e98316ffa588d
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_email.html
@@ -0,0 +1,3 @@
+{% extends "patterns/atoms/form_fields/form_input.html" %}
+
+{% block type %}email{% endblock %}
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_email.yaml b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_email.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..3d6194af36b264110bfa8cf2a6abd1cbcb079bc8
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_email.yaml
@@ -0,0 +1,5 @@
+context:
+ label: 'Registrační email'
+ placeholder: 'info@pirati.cz'
+ hint: ''
+ id: 'email_1'
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_input.html b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_input.html
index 1e3c9e7e63f7e1f41c134ffac5cc2e328c1b28c2..b5720757e174b019e1e325bbf649a4a04479aa33 100644
--- a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_input.html
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_input.html
@@ -1,4 +1,4 @@
-<div class="flex flex-col gap-2 max-w-min">
+<div class="flex flex-col gap-2 items-start">
{% if label %}
<div>
<label for="{{ id }}" class="leading-5">
@@ -11,12 +11,11 @@
</div>
{% endif %}
- <div class="flex gap-2">
+ <div class="flex w-full gap-2">
<input
- type="text"
+ type="{% block type %}text{% endblock %}"
class="
- form-field__control
- py-3 px-3
+ py-3 px-3 w-full lg:w-96
{% block color_classes %}
bg-grey-100 border border-grey-200
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_input.yaml b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_input.yaml
index f476c0d43a64ae6cb09eaab8ad9067eed2b49014..ec3dc507b747a9f4bc7558378474c33b7556527e 100644
--- a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_input.yaml
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_input.yaml
@@ -1,7 +1,7 @@
context:
- placeholder: 'Registrační email'
- hint: ''
+ placeholder: 'Pirát Pepa'
+ hint: 'Hlavně žádné osobní údaje.'
name: 'example'
- is_required: false
+ is_required: true
extra_classes: ''
- label: ''
+ label: 'Jméno'
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_input_backgroundless.html b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_input_backgroundless.html
index 3d4e368fe4b93ee63f325d27f6f18764dcf64344..6074e64ab8a1ae0421758edb2a80c5715af60c71 100644
--- a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_input_backgroundless.html
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_input_backgroundless.html
@@ -1,5 +1,5 @@
{% extends 'patterns/atoms/form_fields/form_input.html' %}
{% block color_classes %}
- text-input bg-white border-none
+ form__text-input bg-white border-none
{% endblock %}
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_multiselect.html b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_multiselect.html
new file mode 100644
index 0000000000000000000000000000000000000000..c72df4c9a7c80499eb97936e233d5bfa313db9b6
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_multiselect.html
@@ -0,0 +1,7 @@
+{% extends "patterns/atoms/form_fields/form_select.html" %}
+
+{% block select_attrs %}multiple{% endblock %}
+
+{% block wrapper_classes %}
+ form__select form__multiselect w-full lg:w-96
+{% endblock %}
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_phone.html b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_phone.html
new file mode 100644
index 0000000000000000000000000000000000000000..8f7cc77940023e74fcaa4ffa6a44bb5e06388694
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_phone.html
@@ -0,0 +1,3 @@
+{% extends "patterns/atoms/form_fields/form_input.html" %}
+
+{% block type %}tel{% endblock %}
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_phone.yaml b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_phone.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..9a94ba5c57f819b1ae1328291b9e85302d569eed
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_phone.yaml
@@ -0,0 +1,6 @@
+context:
+ label: 'Telefon'
+ placeholder: '+420 666 666 666'
+ hint: ''
+ is_required: false
+ id: 'phone_1'
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_radio.html b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_radio.html
new file mode 100644
index 0000000000000000000000000000000000000000..78e40e6a6e4a37003c1dbb20a689990c36974cc0
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_radio.html
@@ -0,0 +1,22 @@
+<div class="flex flex-col gap-2 items-start">
+ {% if label %}
+ <div>
+ <label for="{{ id }}" class="leading-5">
+ {{ label }}
+ </label>
+
+ {% if is_required %}
+ <span class="text-red-600">*</span>
+ {% endif %}
+ </div>
+ {% endif %}
+
+ <div class="flex flex-col gap-1">
+ {% for option in options %}
+ <div class="flex gap-3">
+ <input type="radio" id="{{ option.id }}" name="{{ id }}" value="{{ option.text }}">
+ <label for="{{ option.id }}">{{ option.text }}</label>
+ </div>
+ {% endfor %}
+ </div>
+</div>
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_radio.yaml b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_radio.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..cde7e4c3efee6ea1b93c9a06bac63e97a06caf09
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_radio.yaml
@@ -0,0 +1,15 @@
+context:
+ label: 'Radio boxík'
+ options:
+ -
+ id: 'option-1'
+ text: 'Option 1'
+ -
+ id: 'option-2'
+ text: 'Option 2'
+ -
+ id: 'option-3'
+ text: 'Option 3'
+ classes: ''
+ id: 'radio_1'
+ is_required: true
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_select.html b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_select.html
index 7b9244669375c3ffd6ec62ef8016ea03175b0dc7..3660c4439857f33937c344145d9bb6fb8cf278c5 100644
--- a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_select.html
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_select.html
@@ -1,4 +1,4 @@
-<div class="flex flex-col">
+<div class="flex flex-col gap-2 items-start">
{% if label %}
<label for="{{ id }}">
{{ label }}
@@ -9,12 +9,25 @@
</label>
{% endif %}
- <div class="select max-w-72">
+ <div
+ class="
+ {% block wrapper_classes %}
+ form__select w-full lg:w-96
+ {% endblock %}
+ "
+ >
<select
- class="select__control form-field__control {{ classes }}"
+ class="
+ select__control
+
+ {% block classes %}
+ {{ classes }}
+ {% endblock %}
+ "
value=""
id="{{ id }}"
name="{{ id }}"
+ {% block select_attrs %}{% endblock %}
>
{% for option in options %}
<option>{{ option }}</option>
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_select.yaml b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_select.yaml
index d86229ddaadd3b45b672cdddc0ecd68d1797b79c..96afa06a786ab4e651523669dcc8ab69302bedc6 100644
--- a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_select.yaml
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_select.yaml
@@ -1,5 +1,5 @@
context:
- label: ''
+ label: 'Vybírací boxík'
options:
- 'Option 1'
- 'Option 2'
@@ -8,5 +8,5 @@ context:
- 'Option 5'
- 'Option 6'
classes: ''
- id: 'example2'
+ id: 'select_1'
is_required: true
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_textarea.html b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_textarea.html
new file mode 100644
index 0000000000000000000000000000000000000000..c2b13a29b4bc3e599cc630e570fbdbe3b46027ed
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_textarea.html
@@ -0,0 +1,17 @@
+<div class="flex flex-col items-start gap-2 {{ classes }}">
+ <label for="{{ id }}">
+ {{ label }}
+
+ {% if is_required %}
+ <span class="text-red-600">*</span>
+ {% endif %}
+ </label>
+ <textarea
+ class="
+ form__text-input resize-none
+
+ w-full lg:w-96
+ "
+ id="{{ id }}"
+ ></textarea>
+</div>
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_textarea.yaml b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_textarea.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..a41f209a5c75194a89a542433f787ce9c1e76ef5
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_textarea.yaml
@@ -0,0 +1,4 @@
+context:
+ classes: ''
+ label: 'Smluvní podmínky'
+ id: 'textarea_1'
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/templates/uniweb/form.html b/majak_uistyleguide/templates/patterns/templates/uniweb/form.html
new file mode 100644
index 0000000000000000000000000000000000000000..812af91c85443db3b16936c1d25d89dbadf2dd03
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/templates/uniweb/form.html
@@ -0,0 +1,80 @@
+{% include 'patterns/organisms/layout/navbar.html' %}
+{% include 'patterns/organisms/header/simple_header.html' with title="Stránka s formulářem" %}
+
+<main role="main" class="mb-10 xl:mb-32">
+ <div class="container--wide flex flex-col gap-8 mb-2 lg:mb-12">
+ {% include "patterns/atoms/form_fields/form_input.html" %}
+ {% include "patterns/atoms/form_fields/form_date.html" %}
+ {% include "patterns/atoms/form_fields/form_datetime.html" %}
+ {% include "patterns/atoms/form_fields/form_email.html" %}
+ {% include "patterns/atoms/form_fields/form_phone.html" %}
+ {% include "patterns/atoms/form_fields/form_select.html" %}
+ {% include "patterns/atoms/form_fields/form_radio.html" %}
+ {% include "patterns/atoms/form_fields/form_multiselect.html" %}
+ {% include "patterns/atoms/form_fields/form_textarea.html" %}
+ {% include "patterns/atoms/form_fields/form_checkbox.html" %}
+
+ {% comment %}
+ {% if field.widget_type == "select" %}
+ <label class="form-field__label" for="{{ field.id_for_label }}">{{ field.label }}</label>
+ <div class="form-field__wrapper form-field__wrapper--shadowed">
+ <div class="select">
+ {{ field|add_class:"select__control " }}
+ </div>
+ </div>
+ {% elif field.widget_type == "radioselect" %}
+ <label class="form-field__label" for="{{ field.id_for_label }}">{{ field.label }}</label>
+ <div class="form-field__wrapper py-1 flex flex-col">
+ {% for radio in field %}
+ <div class="my-1">
+ <div class="radio ">
+ {{ radio }}
+ </div>
+ </div>
+ {% endfor %}
+ </div>
+ {% elif field.widget_type == "checkboxselectmultiple" %}
+ <label class="form-field__label mt-2" for="{{ field.id_for_label }}">{{ field.label }}</label>
+ <div class="form-field__wrapper py-1 flex flex-col">
+ {% for checkbox in field %}
+ <div class="my-1">
+ <div class="checkbox ">
+ {{ checkbox.tag }}
+ <label for="{{ checkbox.id_for_label }}">{{ checkbox.choice_label }}</label>
+ </div>
+ </div>
+ {% endfor %}
+ </div>
+ {% elif field.widget_type == "checkbox" %}
+ <div class="form-field__wrapper mt-2">
+ <div class="checkbox ">
+ {{ field }}
+ <label class="form-field__label" for="{{ field.id_for_label }}">{{ field.label }}</label>
+ </div>
+ </div>
+ {% elif field.widget_type == "captchatext" %}
+ <label class="form-field__label" for="{{ field.id_for_label }}">{{ field.label }}</label>
+ <div class="form-field__wrapper form-field__wrapper--shadowed sm:w-1/2">
+ {{ field|add_class:"form__text-input " }}
+ </div>
+ {% else %}
+ <label class="form-field__label" for="{{ field.id_for_label }}">{{ field.label }}</label>
+ <div class="form-field__wrapper form-field__wrapper--shadowed">
+ {{ field|add_class:"form__text-input " }}
+ </div>
+ {% endif %}
+
+ {% if field.help_text %}
+ <div class="form-field__help-text">{{ field.help_text }}</div>
+ {% endif %}
+
+ {% if field.errors %}
+ <div class="form-field__error">{{ field.errors }}</div>
+ {% endif %}
+ {% endcomment %}
+
+ </div>
+ </div>
+</main>
+
+{% include 'patterns/organisms/layout/footer.html' %}
diff --git a/src/css/atoms/form-field.pcss b/src/css/atoms/form-field.pcss
index 7ab30e49cb3e87d15b3bb53ada37375b7b6a0ba6..f4f091ef190ad1390463456803e4dcf304c40bc0 100644
--- a/src/css/atoms/form-field.pcss
+++ b/src/css/atoms/form-field.pcss
@@ -1,11 +1,11 @@
-.text-input-addon {
+.form__text-input-addon {
@apply flex items-center bg-grey-125 text-grey-300 font-normal py-3 px-4 text-lg border border-grey-200 transition duration-200;
}
-.text-input {
+.form__text-input {
@apply outline-none bg-grey-25 py-3 px-4 text-lg border-b-2 border-black transition duration-200;
- /* Fix FF text-input not adjusting it's width.
+ /* Fix FF form__text-input not adjusting it's width.
* See: https://stackoverflow.com/a/48326796/303184
*/
@apply min-w-0;
@@ -35,40 +35,40 @@
}
}
-.text-input-addon--l {
+.form__text-input-addon--l {
@apply border-r-0;
}
-.text-input-addon--r {
+.form__text-input-addon--r {
@apply border-l-0;
}
-.text-input:hover:not([disabled]):not([readonly]) ~ .text-input-addon {
+.form__text-input:hover:not([disabled]):not([readonly]) ~ .form__text-input-addon {
@apply border-grey-300;
}
-.text-input:focus:not([disabled]):not([readonly]) ~ .text-input-addon,
-.text-input:active:not([disabled]):not([readonly]) ~ .text-input-addon {
+.form__text-input:focus:not([disabled]):not([readonly]) ~ .form__text-input-addon,
+.form__text-input:active:not([disabled]):not([readonly]) ~ .form__text-input-addon {
@apply border-blue-300;
}
-.text-input[readonly] ~ .text-input-addon,
-.text-input[disabled] ~ .text-input-addon {
+.form__text-input[readonly] ~ .form__text-input-addon,
+.form__text-input[disabled] ~ .form__text-input-addon {
@apply bg-grey-125 text-grey-200;
}
-.text-input--has-addon-l.text-input {
+.form__text-input--has-addon-l.form__text-input {
@apply border-l-0;
}
-.text-input--has-addon-r.text-input {
+.form__text-input--has-addon-r.form__text-input {
@apply border-r-0;
}
-.select {
- @apply relative flex items-center w-full py-2 xl:py-4;
+.form__select {
+ @apply relative flex items-center w-full;
- &:after {
+ &:not(.form__multiselect):after {
@apply absolute right-0 text-xl font-bold pr-3 transition duration-200;
font-family: 'pirati-ui';
/* chevron down */
@@ -110,7 +110,7 @@
}
-.checkbox {
+.form__checkbox {
@apply relative flex;
input {
@@ -191,9 +191,9 @@
.form-field--error {
- .text-input,
+ .form__text-input,
.select__control,
- .text-input ~ .text-input-addon {
+ .form__text-input ~ .form__text-input-addon {
@apply border-red-600;
}
}