Add radio and select

source/_patterns/00-atoms/15-form-fields/05-select.mustache

+<div class="select">
+  <select class="select__control form-field__control {{ classes }}" value="" {{# disabled }}disabled{{/ disabled }} {{# readonly }}readonly{{/ readonly }}>
+    <option>Option 1</option>
+    <option>Option 2</option>
+    <option>Option 3</option>
+    <option>Option 4</option>
+  </select>
+</div>

source/_patterns/00-atoms/15-form-fields/06-disabled-select.mustache

+{{> atoms-select(disabled: true) }}

source/_patterns/00-atoms/15-form-fields/07-readonly-select.mustache

+{{> atoms-select(readonly: true) }}

source/_patterns/00-atoms/15-form-fields/checkbox.mustache → source/_patterns/00-atoms/15-form-fields/08-checkbox.mustache

 <div class="checkbox form-field__control">
-  <input type="checkbox" id="checkbox_1">
+  <input type="checkbox" id="checkbox_1" {{# disabled }}disabled{{/ disabled }} {{# readonly }}readonly{{/ readonly }}>
   <label for="checkbox_1">{{ excerpt.short }}</label>
 </div>

source/_patterns/00-atoms/15-form-fields/09-disabled-checkbox.mustache

+{{> atoms-checkbox(disabled: true) }}

source/_patterns/00-atoms/15-form-fields/10-radio.mustache

+<div class="radio form-field__control">
+  <label>
+    <input type="radio" name="radio" {{# disabled }}disabled{{/ disabled }}>
+    <span>Option</span>
+  </label>
+</div>

source/_patterns/00-atoms/15-form-fields/11-disabled-radio.mustache

+{{> atoms-radio(disabled: true) }}

source/_patterns/01-molecules/14-form-fields/radio-field.mustache

+<div class="form-field {{# error }}form-field--error{{/ error }} {{ classes }}">
+  <div class="form-field__wrapper {{ wrapperClasses }}">
+    {{> atoms-radio }}
+    {{> atoms-radio }}
+    {{> atoms-radio }}
+  </div>
+  {{# error }}
+    <div class="form-field__error">{{ error }}</div>
+  {{/ error }}
+  {{# help }}
+    <div class="form-field__help-text">{{ help }}</div>
+  {{/ help }}
+</div>

source/_patterns/01-molecules/14-form-fields/select-field.mustache

+<div class="form-field {{# error }}form-field--error{{/ error }} {{ classes }}">
+  <label class="form-field__label" for="field">{{ label }}{{^ label }}{{ form.label }}{{/ label }}</label>
+  <div class="form-field__wrapper  form-field__wrapper--shadowed">
+    {{> atoms-select }}
+  </div>
+  {{# error }}
+    <div class="form-field__error">{{ error }}</div>
+  {{/ error }}
+  {{# help }}
+    <div class="form-field__help-text">{{ help }}</div>
+  {{/ help }}
+</div>

source/_patterns/01-molecules/14-form-fields/validation.mustache

@@ -8,4 +8,8 @@
       {{> atoms-text-input-addon(classes: "text-input-addon--r") }}
     </div>
   </div>
+
+  {{> molecules-select-field(classes: "form-field--required", error: "Toto pole je povinné")}}
+  {{> molecules-radio-field(classes: "form-field--required", error: "Toto pole je povinné")}}
+  {{> molecules-checkbox-field(classes: "form-field--required", error: "Toto pole je povinné")}}
 </div>

source/_patterns/02-organisms/07-forms/form.mustache

@@ -3,5 +3,9 @@
   {{> molecules-addon-field(classes: "col-span-2") }}
   {{> molecules-field(classes: "col-span-4 form-field--required", error: "Tady nastala nějaká chyba") }}
   {{> molecules-checkbox-field(classes: "col-span-4") }}
+  {{> molecules-radio-field(classes: "col-span-3") }}
+  {{> molecules-radio-field(classes: "col-span-1", wrapperClasses: "form-field__wrapper--col-items") }}
+  {{> molecules-select-field(classes: "col-span-2") }}
+  {{> molecules-select-field(classes: "col-span-2") }}
   {{> atoms-button(classes: "col-span-2 text-lg max-w-full btn--black-100", cta: "Odeslat") }}
 </div>

source/css/atoms/form-field.pcss

@@ -3,16 +3,16 @@
 }
 
 .text-input {
-  @apply bg-white py-3 px-4 text-lg border border-grey-200 transition duration-200;
+  @apply outline-none bg-grey-25 py-3 px-4 text-lg border border-grey-200 transition duration-200;
 
   &:hover:not([disabled]):not([readonly]) {
-    @apply outline-none border-grey-300;
+    @apply border-grey-300;
   }
 
   &:active,
   &:focus {
     &:not([disabled]):not([readonly]) {
-      @apply outline-none border-blue-300;
+      @apply border-blue-300;
     }
   }
 
@@ -60,37 +60,68 @@
   @apply border-r-0;
 }
 
-.form-field--error {
-  .text-input,
-  .text-input ~ .text-input-addon {
-    @apply border-red-600;
+.select {
+  @apply relative flex items-center w-full;
+
+  &:after {
+    @apply absolute right-0 text-xl font-bold pr-3 transition duration-200;
+    font-family: 'pirati-ui';
+    /* chevron down */
+    content: "\e925";
   }
 }
 
+.select__control {
+  @apply w-full appearance-none outline-none bg-grey-25 py-3 pl-4 pr-8 text-lg rounded-none border border-grey-200 transition duration-200;
+
+  &:hover:not([disabled]):not([readonly]) {
+    @apply border-grey-300;
+  }
+
+  &:active,
+  &:focus {
+    &:not([disabled]):not([readonly]) {
+      @apply border-blue-300;
+    }
+  }
+
+  &::placeholder {
+    @apply text-grey-200 font-normal;
+  }
+
+  &[readonly],
+  &[disabled] {
+    @apply bg-grey-125 cursor-not-allowed;
+
+    &::placeholder {
+      @apply text-grey-200;
+    }
+  }
+}
 
 
 .checkbox {
   @apply relative flex;
 
   input {
-    @apply w-6 h-6 cursor-pointer bg-grey-200 mr-2 border border-grey-200 transition duration-200;
-
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
+    @apply w-5 h-5 cursor-pointer appearance-none outline-none bg-grey-200 mr-2 border border-grey-200 transition duration-200;
 
     &:hover:not([disabled]):not([readonly]) {
-      @apply outline-none border-grey-300;
+      @apply border-grey-300;
     }
 
     &:active,
     &:focus {
-      @apply outline-none border-blue-300;
+      @apply border-blue-300;
     }
 
     &:checked {
       @apply bg-blue-300 border-transparent;
     }
+
+    &[disabled] {
+      @apply cursor-not-allowed;
+    }
   }
 
   label {
@@ -103,11 +134,61 @@
     content: "";
     height: 5px;
     width: 12px;
-    top: 8px;
-    left: 6px;
+    top: 6px;
+    left: 4px;
 
     border-left: 2px solid theme("colors.white");
     border-bottom: 2px solid theme("colors.white");
     transform: rotate(-45deg);
   }
 }
+
+
+.radio {
+  @apply relative;
+
+  input {
+    @apply w-5 h-5 appearance-none cursor-pointer outline-none bg-grey-200 mr-2 border border-grey-200 transition duration-200 rounded-full;
+
+    &:hover:not([disabled]):not([readonly]) {
+      @apply border-grey-300;
+    }
+
+    &:active,
+    &:focus {
+      @apply border-blue-300;
+    }
+
+    &:checked {
+      @apply bg-blue-300 border-transparent;
+    }
+
+    &[disabled] {
+      @apply cursor-not-allowed;
+    }
+  }
+
+  label {
+    @apply flex items-center leading-tight;
+  }
+
+  &:after {
+    @apply inline absolute pointer-events-none rounded-full bg-white;
+
+    width: .7rem;
+    height: .7rem;
+
+    content: "";
+    top: calc((theme("spacing.5") - .7rem) / 2);
+    left: calc((theme("spacing.5") - .7rem) / 2);
+  }
+}
+
+
+.form-field--error {
+  .text-input,
+  .select__control,
+  .text-input ~ .text-input-addon {
+    @apply border-red-600;
+  }
+}

source/css/molecules/form-field.pcss

@@ -7,22 +7,35 @@
 }
 
 .form-field__wrapper {
-  /* Flex allows centering absolute position too, used for .form-field--appendicon */
   @apply relative flex;
 
   /* Inset shadow for text-fields */
-  &.form-field__wrapper--shadowed:after {
+  &--shadowed:after {
     @apply absolute w-full h-full pointer-events-none;
 
     content: "";
     box-shadow: inset 0 2px 6px 0 rgba(0,0,0,.1);
   }
+
+  &,
+  &--row-items {
+    .form-field__control + .form-field__control {
+      @apply ml-4;
+    }
+  }
+
+  &--col-items {
+    @apply flex-col;
+
+    .form-field__control + .form-field__control {
+      @apply ml-0 mt-4;
+    }
+  }
 }
 
 .form-field__error,
 .form-field__help-text {
   @apply text-sm mt-1 font-light;
-
 }
 
 .form-field__error {

tailwind.config.js

@@ -84,6 +84,7 @@ module.exports = {
       'black': '#000000',
       'white': '#ffffff',
       'grey': {
+        '25': '#fafafa',
         '50': '#f7f7f7',
         '100': '#f3f3f3',
         '125': '#f0f0f0',