[ADD] newsletter section

main/styleguide/source/_patterns/atoms/form-fields/form-checkbox.mustache

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

main/styleguide/source/_patterns/atoms/form-fields/form-input.mustache

+<input type="text" class="text-input form-field__control {{ classes }}" value="" placeholder="{{ placeholder }}{{^ placeholder }}{{ form.placeholder }}{{/ placeholder }}" {{# disabled }}disabled{{/ disabled }} {{# readonly }}readonly{{/ readonly }} />

main/styleguide/source/_patterns/atoms/form-fields/form-select.mustache

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

main/styleguide/source/_patterns/molecules/articles/small-article-preview.mustache

-x1<div class="flex">
+<div class="flex">
   <img
       src="https://i.picsum.photos/id/523/132/132.jpg?hmac=XjW7KxLZNbta7gMDNvldHNGwA9XyxpjBFUGkJqrMR4o"
       alt=""

main/styleguide/source/_patterns/organisms/newsletter-section.mustache

+<div class="section-clip py-32 bg-no-repeat"
+     style="background-image: url('https://i.picsum.photos/id/630/1980/1400.jpg?hmac=WjDo021fzd9SaIlmsi9LtZJApZ02RMzdG0bYLx8iXOo')">
+  <div class="container--middle mx-auto px-4 ">
+      <div class="w-6/12 flex flex-col">
+        <div class="flex mb-4">
+          <i class="ico--anchor text-9xl mb-4 w-1/4"></i>
+          <h5 class="uppercase mt-4 head-alt-md w-3/4 md:head-alt-lg">Odebírej náš newsletter</h5>
+        </div>
+        <div class="flex">
+          <span class="uppercase font-bold w-1/4">
+            Fake news tam nenajdeš, ale dozvíš se co chystáme doopravdy!
+          </span>
+          <div class="w-3/4">
+            {{> atoms-form-input(placeholder: "Tvůj email", classes: "mb-3") }}
+            {{> atoms-form-checkbox(label: "Souhlasím se zpracováním osobních údajů", classes: "mb-3") }}
+            {{> atoms-button-animated(btn-text: "Odebírat") }}
+          </div>
+        </div>
+      </div>
+    <div></div>
+  </div>
+</div>

main/styleguide/source/_patterns/organisms/region-section.mustache

+<div class="section-clip py-32 bg-no-repeat"
+     style="background-image: url('https://i.picsum.photos/id/630/1980/1400.jpg?hmac=WjDo021fzd9SaIlmsi9LtZJApZ02RMzdG0bYLx8iXOo')">
+  <div class="container--middle mx-auto px-4 ">
+    <h2 class="clear-both head-alt-md md:head-alt-lg pb-4 lg:pb-8 text-center mb-16">
+      Piráti v regionech
+    </h2>
+    <div class="flex">
+      <div class="w-7/12 flex items-center justify-center">
+        MAPA
+      </div>
+      <div class="w-5/12">
+        <div class="flex flex-col">
+          {{> atoms-form-select }}
+
+          <div class="mb-3">
+            {{> molecules-small-article-preview }}
+          </div>
+          <div class="mb-3">
+            {{> molecules-small-article-preview }}
+          </div>
+          <div class="mb-3">
+            {{> molecules-small-article-preview }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div></div>
+  </div>
+</div>

main/styleguide/source/_patterns/templates/homepage.mustache

@@ -58,6 +58,9 @@
       </div>
     </div>
   </div>
+  {{> organisms-region-section }}
+  {{> organisms-newsletter-section }}
+
   <div class="section-clip py-32 bg-no-repeat"
        style="background-image: url('https://i.picsum.photos/id/630/1980/1400.jpg?hmac=WjDo021fzd9SaIlmsi9LtZJApZ02RMzdG0bYLx8iXOo')">
     <div class="container--wide mx-auto px-4 pt-16">

main/styleguide/source/css/atoms/form-field.pcss

+.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 {
+  @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.
+   * See: https://stackoverflow.com/a/48326796/303184
+   */
+  @apply min-w-0;
+
+  &: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;
+    }
+  }
+}
+
+.text-input-addon--l {
+  @apply border-r-0;
+}
+
+.text-input-addon--r {
+  @apply border-l-0;
+}
+
+.text-input:hover:not([disabled]):not([readonly]) ~ .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 {
+  @apply border-blue-300;
+}
+
+.text-input[readonly] ~ .text-input-addon,
+.text-input[disabled] ~ .text-input-addon {
+  @apply bg-grey-125 text-grey-200;
+}
+
+.text-input--has-addon-l.text-input {
+  @apply border-l-0;
+}
+
+.text-input--has-addon-r.text-input {
+  @apply border-r-0;
+}
+
+.select {
+  @apply relative flex items-center w-full py-4;
+
+  &: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-5 pl-4 pr-8 text-lg rounded-none border border-grey-200 transition duration-200;
+
+  /* Fix FF input not adjusting it's width.
+   * See: https://stackoverflow.com/a/48326796/303184
+   */
+  @apply min-w-0;
+
+  &: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-5 h-5 mr-2 flex-shrink-0 cursor-pointer appearance-none outline-none bg-white border border-grey-200 transition duration-200;
+
+    &: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 max-w-lg leading-tight uppercase;
+  }
+
+  &:after {
+    @apply inline absolute pointer-events-none;
+
+    content: "";
+    height: 5px;
+    width: 12px;
+    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 mr-2 flex-shrink-0 appearance-none cursor-pointer outline-none bg-grey-200 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 w-2 h-2 inline absolute pointer-events-none bg-white;
+
+    content: "";
+    /* Somehow, standard Tailwind `rounded-full` ends up not creating a perfect circle */
+    border-radius: 50%;
+    top: calc((theme("spacing.5") - theme("spacing.2")) / 2);
+    left: calc((theme("spacing.5") - theme("spacing.2")) / 2);
+  }
+}
+
+
+.form-field--error {
+  .text-input,
+  .select__control,
+  .text-input ~ .text-input-addon {
+    @apply border-red-600;
+  }
+}

main/styleguide/source/css/style.pcss

@@ -20,6 +20,7 @@
 */
 @import "./atoms/container.pcss";
 @import "./atoms/flag.pcss";
+@import "./atoms/form-field.pcss";
 @import "./atoms/heading.pcss";
 @import "./atoms/icons.pcss";