diff --git a/source/_data/data.json b/source/_data/data.json
index 188dce07fc4daa0c9b505883aeee74ef42bd7f8d..92b395bfad2aae691e6e6c3e591cf3a816c7cf30 100755
--- a/source/_data/data.json
+++ b/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"}
+ ]
}
]
}
diff --git a/source/_patterns/00-atoms/15-form-fields/checkbox.mustache b/source/_patterns/00-atoms/15-form-fields/checkbox.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..55008b14d4739c2ea73b648e878d121256793359
--- /dev/null
+++ b/source/_patterns/00-atoms/15-form-fields/checkbox.mustache
@@ -0,0 +1,4 @@
+<div class="checkbox form-field__control">
+ <input type="checkbox" id="checkbox_1">
+ <label for="checkbox_1">{{ excerpt.short }}</label>
+</div>
diff --git a/source/_patterns/00-atoms/15-form-fields/disabled-text-input.mustache b/source/_patterns/00-atoms/15-form-fields/disabled-text-input.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..ebdfa7a416eb9bd39fe54c8922b7caaf3c5dc3ae
--- /dev/null
+++ b/source/_patterns/00-atoms/15-form-fields/disabled-text-input.mustache
@@ -0,0 +1 @@
+{{> atoms-text-input(disabled: true) }}
diff --git a/source/_patterns/00-atoms/15-form-fields/password-input.mustache b/source/_patterns/00-atoms/15-form-fields/password-input.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..17a64b09813a815184e4c42259d3217023629687
--- /dev/null
+++ b/source/_patterns/00-atoms/15-form-fields/password-input.mustache
@@ -0,0 +1 @@
+<input type="password" class="text-input form-field__control" value="" placeholder="{{ placeholder }}{{^ placeholder }}{{ form.placeholder }}{{/ placeholder }}" />
diff --git a/source/_patterns/00-atoms/15-form-fields/read-only-text-input.mustache b/source/_patterns/00-atoms/15-form-fields/read-only-text-input.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..60e6d9ba7aa29124d5dd0553cb52ada63c0accba
--- /dev/null
+++ b/source/_patterns/00-atoms/15-form-fields/read-only-text-input.mustache
@@ -0,0 +1 @@
+{{> atoms-text-input(readonly: true) }}
diff --git a/source/_patterns/00-atoms/15-form-fields/text-input-addon.mustache b/source/_patterns/00-atoms/15-form-fields/text-input-addon.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..2c869944ba762985fb3d1abdefeac80f4b3e6be5
--- /dev/null
+++ b/source/_patterns/00-atoms/15-form-fields/text-input-addon.mustache
@@ -0,0 +1 @@
+<div class="text-input-addon {{ classes }}"><i class="ico--pirati"></i></div>
diff --git a/source/_patterns/00-atoms/15-form-fields/text-input.mustache b/source/_patterns/00-atoms/15-form-fields/text-input.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..2cb74d99b3dcbacac1b82220678c0454efeba237
--- /dev/null
+++ b/source/_patterns/00-atoms/15-form-fields/text-input.mustache
@@ -0,0 +1 @@
+<input type="text" class="text-input form-field__control {{ classes }}" value="" placeholder="{{ placeholder }}{{^ placeholder }}{{ form.placeholder }}{{/ placeholder }}" {{# disabled }}disabled{{/ disabled }} {{# readonly }}readonly{{/ readonly }} />
diff --git a/source/_patterns/01-molecules/14-form-fields/addon-field.mustache b/source/_patterns/01-molecules/14-form-fields/addon-field.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..2440a08432e874ca5afe1c7e4859e9411619b9ce
--- /dev/null
+++ b/source/_patterns/01-molecules/14-form-fields/addon-field.mustache
@@ -0,0 +1,13 @@
+<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>
diff --git a/source/_patterns/01-molecules/14-form-fields/checkbox-field.mustache b/source/_patterns/01-molecules/14-form-fields/checkbox-field.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..90a13afaef1c47482bfaca427713da616c4d70bc
--- /dev/null
+++ b/source/_patterns/01-molecules/14-form-fields/checkbox-field.mustache
@@ -0,0 +1,11 @@
+<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>
diff --git a/source/_patterns/01-molecules/14-form-fields/field.mustache b/source/_patterns/01-molecules/14-form-fields/field.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..01752d524b59a3682163478753efe9def2da2cc5
--- /dev/null
+++ b/source/_patterns/01-molecules/14-form-fields/field.mustache
@@ -0,0 +1,12 @@
+<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>
diff --git a/source/_patterns/01-molecules/14-form-fields/help-text.mustache b/source/_patterns/01-molecules/14-form-fields/help-text.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..bcde9bee6e776ead617895bfcca91611dd80b36c
--- /dev/null
+++ b/source/_patterns/01-molecules/14-form-fields/help-text.mustache
@@ -0,0 +1 @@
+{{> molecules-field(help: "Zde vyplňte co uznáte za vhodné")}}
diff --git a/source/_patterns/01-molecules/14-form-fields/input-addon.mustache b/source/_patterns/01-molecules/14-form-fields/input-addon.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..3f97d3e795c87016c53a11535615786e894e0cd6
--- /dev/null
+++ b/source/_patterns/01-molecules/14-form-fields/input-addon.mustache
@@ -0,0 +1,15 @@
+<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>
diff --git a/source/_patterns/01-molecules/14-form-fields/required-fields-memo.mustache b/source/_patterns/01-molecules/14-form-fields/required-fields-memo.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..828e323145fa7fb3960aeab7fa973365272addd5
--- /dev/null
+++ b/source/_patterns/01-molecules/14-form-fields/required-fields-memo.mustache
@@ -0,0 +1 @@
+<span class="form-fields-required-memo">Povinná pole</span>
diff --git a/source/_patterns/01-molecules/14-form-fields/split-text-input.mustache b/source/_patterns/01-molecules/14-form-fields/split-text-input.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..8a8dd9f23f2554d7324fad41db704399c6cf75bb
--- /dev/null
+++ b/source/_patterns/01-molecules/14-form-fields/split-text-input.mustache
@@ -0,0 +1,4 @@
+<div class="space-x-2 flex">
+ {{> atoms-text-input(placeholder: "placeholder1") }}
+ {{> atoms-text-input(placeholder: "placeholder2") }}
+</div>
diff --git a/source/_patterns/01-molecules/14-form-fields/validation.mustache b/source/_patterns/01-molecules/14-form-fields/validation.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..09f6a8209eaf4219b7de42325df24cfa3c9ab990
--- /dev/null
+++ b/source/_patterns/01-molecules/14-form-fields/validation.mustache
@@ -0,0 +1,11 @@
+<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>
diff --git a/source/_patterns/02-organisms/07-forms/form.mustache b/source/_patterns/02-organisms/07-forms/form.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..c08002a5e962504b76a5ebb084996afdf47b463f
--- /dev/null
+++ b/source/_patterns/02-organisms/07-forms/form.mustache
@@ -0,0 +1,7 @@
+<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>
diff --git a/source/css/atoms/form-field.pcss b/source/css/atoms/form-field.pcss
new file mode 100644
index 0000000000000000000000000000000000000000..3c9d1f9dab903932c1990d7a48adfb9c5562cd9d
--- /dev/null
+++ b/source/css/atoms/form-field.pcss
@@ -0,0 +1,113 @@
+.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);
+ }
+}
diff --git a/source/css/molecules/form-field.pcss b/source/css/molecules/form-field.pcss
new file mode 100644
index 0000000000000000000000000000000000000000..e6542578045e07838aaec38cb227203bed89a442
--- /dev/null
+++ b/source/css/molecules/form-field.pcss
@@ -0,0 +1,49 @@
+.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;
+}
diff --git a/source/css/style.pcss b/source/css/style.pcss
index da95b12dc4d273a7d4a684928e380e3aba9531f4..6e90e655868005f829eada9b6aba8880220f32ca 100644
--- a/source/css/style.pcss
+++ b/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";
diff --git a/tailwind.config.js b/tailwind.config.js
index 0525920fe3ba3fe5f24721cc30677b3fdafe5d88..229a268f707e1c0416eb6cf2c80745d0ae99f4c5 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -100,6 +100,9 @@ module.exports = {
'200': '#92c6ab',
'300': darken('#92c6ab', 0.1),
},
+ 'red': {
+ '600': '#d60d53'
+ },
'brands': {
'facebook': '#067ceb',
'twitter': '#00c9ff',