add form page

majak_uistyleguide/templates/patterns/templates/uniweb/form.html

+{% 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' %}

src/css/atoms/form-field.pcss

-.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;
   }
 }