Style form fields

source/_data/data.json

@@ -93,6 +93,10 @@
     "short": "20"
   },
   "seconds": "31",
+  "form": {
+    "label": "Název políčka",
+    "placeholder": "Placeholder"
+  },
   "greyColors": [
     {"cls": "grey-50", "hex": "#f7f7f7", "name": "Grey 50"},
     {"cls": "grey-100", "hex": "#f3f3f3", "name": "Grey 100"},
@@ -155,6 +159,12 @@
         {"cls": "violet-400", "name": "Violet 400", "hex": "#840048"},
         {"cls": "violet-500", "name": "Violet 500", "hex": "#670047"}
       ]
+    },
+    {
+      "name": "Red",
+      "variants": [
+        {"cls": "red-600", "name": "Red 600", "hex": "#d60d53"}
+      ]
     }
   ]
 }

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

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

source/_patterns/00-atoms/15-form-fields/disabled-text-input.mustache

+{{> atoms-text-input(disabled: true) }}

source/_patterns/00-atoms/15-form-fields/password-input.mustache

+<input type="password" class="text-input form-field__control" value="" placeholder="{{ placeholder }}{{^ placeholder }}{{ form.placeholder }}{{/ placeholder }}" />

source/_patterns/00-atoms/15-form-fields/read-only-text-input.mustache

+{{> atoms-text-input(readonly: true) }}

source/_patterns/00-atoms/15-form-fields/text-input-addon.mustache

+<div class="text-input-addon {{ classes }}"><i class="ico--pirati"></i></div>

source/_patterns/00-atoms/15-form-fields/text-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 }} />

source/_patterns/01-molecules/14-form-fields/addon-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-text-input(classes: "text-input--has-addon-r") }}
+    {{> atoms-text-input-addon(classes: "text-input-addon--r") }}
+  </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/checkbox-field.mustache

+<div class="form-field {{# error }}form-field--error{{/ error }} {{ classes }}">
+  <div class="form-field__wrapper">
+    {{> atoms-checkbox }}
+  </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/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-text-input }}
+  </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/help-text.mustache

+{{> molecules-field(help: "Zde vyplňte co uznáte za vhodné")}}

source/_patterns/01-molecules/14-form-fields/input-addon.mustache

+<div class="form-field">
+  <div class="form-field__wrapper">
+    {{> atoms-text-input(classes: "text-input--has-addon-l text-input--has-addon-r") }}
+    {{> atoms-text-input-addon(classes: "text-input-addon--l order-first") }}
+    {{> atoms-text-input-addon(classes: "text-input-addon--r") }}
+  </div>
+</div>
+
+<div class="form-field mt-8">
+  <div class="form-field__wrapper">
+    {{> atoms-text-input(classes: "text-input--has-addon-l text-input--has-addon-r", disabled: true) }}
+    {{> atoms-text-input-addon(classes: "text-input-addon--l order-first") }}
+    {{> atoms-text-input-addon(classes: "text-input-addon--r") }}
+  </div>
+</div>

source/_patterns/01-molecules/14-form-fields/required-fields-memo.mustache

+<span class="form-fields-required-memo">Povinná pole</span>

source/_patterns/01-molecules/14-form-fields/split-text-input.mustache

+<div class="space-x-2 flex">
+  {{> atoms-text-input(placeholder: "placeholder1") }}
+  {{> atoms-text-input(placeholder: "placeholder2") }}
+</div>

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

+<div class="space-y-4">
+  {{> molecules-field(classes: "form-field--required", error: "Toto pole je povinné")}}
+
+  <div class="form-field form-field--required form-field--error">
+    <div class="form-field__wrapper">
+      {{> atoms-text-input(classes: "text-input--has-addon-l text-input--has-addon-r") }}
+      {{> atoms-text-input-addon(classes: "text-input-addon--l order-first") }}
+      {{> atoms-text-input-addon(classes: "text-input-addon--r") }}
+    </div>
+  </div>
+</div>

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

+<div class="grid grid-cols-4 gap-4 row-gap-6 max-w-lg">
+  {{> molecules-field(classes: "col-span-2", help: "Tohle je nápověda k políčku") }}
+  {{> 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") }}
+  {{> atoms-button(classes: "col-span-2 text-lg max-w-full btn--black-100", cta: "Odeslat") }}
+</div>

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 whitespace-no-wrap border border-grey-200 transition duration-200;
+}
+
+.text-input {
+  @apply bg-white py-3 px-4 text-lg border border-grey-200 transition duration-200;
+
+  &:hover:not([disabled]):not([readonly]) {
+    @apply outline-none border-grey-300;
+  }
+
+  &:active,
+  &:focus {
+    &:not([disabled]):not([readonly]) {
+      @apply outline-none 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;
+}
+
+.form-field--error {
+  .text-input,
+  .text-input ~ .text-input-addon {
+    @apply border-red-600;
+  }
+}
+
+
+
+.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;
+
+    &:hover:not([disabled]):not([readonly]) {
+      @apply outline-none border-grey-300;
+    }
+
+    &:active,
+    &:focus {
+      @apply outline-none border-blue-300;
+    }
+
+    &:checked {
+      @apply bg-blue-300 border-transparent;
+    }
+  }
+
+  label {
+    @apply max-w-lg leading-tight;
+  }
+
+  &:after {
+    @apply inline absolute pointer-events-none;
+
+    content: "";
+    height: 5px;
+    width: 12px;
+    top: 8px;
+    left: 6px;
+
+    border-left: 2px solid theme("colors.white");
+    border-bottom: 2px solid theme("colors.white");
+    transform: rotate(-45deg);
+  }
+}

source/css/molecules/form-field.pcss

+.form-field .text-input {
+  @apply w-full;
+}
+
+.form-field__label {
+  @apply block mb-2;
+}
+
+.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 {
+    @apply absolute w-full h-full pointer-events-none;
+
+    content: "";
+    box-shadow: inset 0 2px 6px 0 rgba(0,0,0,.1);
+  }
+}
+
+.form-field__error,
+.form-field__help-text {
+  @apply text-sm mt-1 font-light;
+
+}
+
+.form-field__error {
+  @apply text-red-600;
+}
+
+.form-field__help-text {
+  @apply text-grey-300;
+}
+
+.form-field__error + .form-field__help-text {
+  @apply mt-4;
+}
+
+.form-field--required .form-field__label:after {
+  content: "*";
+  @apply text-red-600 ml-1;
+}
+
+
+.form-fields-required-memo:before {
+  content: "*";
+  @apply text-red-600 mr-1;
+}

source/css/style.pcss

@@ -24,6 +24,7 @@
 @import "./atoms/container.pcss";
 @import "./atoms/figure.pcss";
 @import "./atoms/flag.pcss";
+@import "./atoms/form-field.pcss";
 @import "./atoms/heading.pcss";
 @import "./atoms/horizontal-rule.pcss";
 @import "./atoms/icons.pcss";
@@ -42,6 +43,7 @@
 @import "./molecules/candidate-table-row.pcss";
 @import "./molecules/content-block.pcss";
 @import "./molecules/flip-clock.pcss";
+@import "./molecules/form-field.pcss";
 @import "./molecules/pagination.pcss";
 @import "./molecules/program-point-list.pcss";
 @import "./molecules/social-icon-group.pcss";

tailwind.config.js

@@ -100,6 +100,9 @@ module.exports = {
         '200': '#92c6ab',
         '300': darken('#92c6ab', 0.1),
       },
+      'red': {
+        '600': '#d60d53'
+      },
       'brands': {
         'facebook': '#067ceb',
         'twitter': '#00c9ff',