From ab6f3bbead31dcd9f10ce8730616109fc6118fef Mon Sep 17 00:00:00 2001
From: xaralis <filip.varecha@fragaria.cz>
Date: Sat, 25 Jul 2020 12:56:05 +0200
Subject: [PATCH] Style form fields
---
source/_data/data.json | 10 ++
.../00-atoms/15-form-fields/checkbox.mustache | 4 +
.../disabled-text-input.mustache | 1 +
.../15-form-fields/password-input.mustache | 1 +
.../read-only-text-input.mustache | 1 +
.../15-form-fields/text-input-addon.mustache | 1 +
.../15-form-fields/text-input.mustache | 1 +
.../14-form-fields/addon-field.mustache | 13 ++
.../14-form-fields/checkbox-field.mustache | 11 ++
.../14-form-fields/field.mustache | 12 ++
.../14-form-fields/help-text.mustache | 1 +
.../14-form-fields/input-addon.mustache | 15 +++
.../required-fields-memo.mustache | 1 +
.../14-form-fields/split-text-input.mustache | 4 +
.../14-form-fields/validation.mustache | 11 ++
.../02-organisms/07-forms/form.mustache | 7 ++
source/css/atoms/form-field.pcss | 113 ++++++++++++++++++
source/css/molecules/form-field.pcss | 49 ++++++++
source/css/style.pcss | 2 +
tailwind.config.js | 3 +
20 files changed, 261 insertions(+)
create mode 100644 source/_patterns/00-atoms/15-form-fields/checkbox.mustache
create mode 100644 source/_patterns/00-atoms/15-form-fields/disabled-text-input.mustache
create mode 100644 source/_patterns/00-atoms/15-form-fields/password-input.mustache
create mode 100644 source/_patterns/00-atoms/15-form-fields/read-only-text-input.mustache
create mode 100644 source/_patterns/00-atoms/15-form-fields/text-input-addon.mustache
create mode 100644 source/_patterns/00-atoms/15-form-fields/text-input.mustache
create mode 100644 source/_patterns/01-molecules/14-form-fields/addon-field.mustache
create mode 100644 source/_patterns/01-molecules/14-form-fields/checkbox-field.mustache
create mode 100644 source/_patterns/01-molecules/14-form-fields/field.mustache
create mode 100644 source/_patterns/01-molecules/14-form-fields/help-text.mustache
create mode 100644 source/_patterns/01-molecules/14-form-fields/input-addon.mustache
create mode 100644 source/_patterns/01-molecules/14-form-fields/required-fields-memo.mustache
create mode 100644 source/_patterns/01-molecules/14-form-fields/split-text-input.mustache
create mode 100644 source/_patterns/01-molecules/14-form-fields/validation.mustache
create mode 100644 source/_patterns/02-organisms/07-forms/form.mustache
create mode 100644 source/css/atoms/form-field.pcss
create mode 100644 source/css/molecules/form-field.pcss
diff --git a/source/_data/data.json b/source/_data/data.json
index 188dce0..92b395b 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 0000000..55008b1
--- /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 0000000..ebdfa7a
--- /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 0000000..17a64b0
--- /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 0000000..60e6d9b
--- /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 0000000..2c86994
--- /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 0000000..2cb74d9
--- /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 0000000..2440a08
--- /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 0000000..90a13af
--- /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 0000000..01752d5
--- /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 0000000..bcde9be
--- /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 0000000..3f97d3e
--- /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 0000000..828e323
--- /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 0000000..8a8dd9f
--- /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 0000000..09f6a82
--- /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 0000000..c08002a
--- /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 0000000..3c9d1f9
--- /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 0000000..e654257
--- /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 da95b12..6e90e65 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 0525920..229a268 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',
--
GitLab