From 5a9a3398f8dcfc1d29138bd20052923c7a3420ae Mon Sep 17 00:00:00 2001 From: xaralis <filip.varecha@fragaria.cz> Date: Sun, 26 Jul 2020 16:06:06 +0200 Subject: [PATCH] Add radio and select --- ...-input.mustache => 01-text-input.mustache} | 0 ...stache => 02-disabled-text-input.mustache} | 0 ...tache => 03-read-only-text-input.mustache} | 0 ....mustache => 04-text-input-addon.mustache} | 0 .../15-form-fields/05-select.mustache | 8 ++ .../06-disabled-select.mustache | 1 + .../07-readonly-select.mustache | 1 + .../15-form-fields/08-checkbox.mustache | 4 + .../09-disabled-checkbox.mustache | 1 + .../00-atoms/15-form-fields/10-radio.mustache | 6 + .../15-form-fields/11-disabled-radio.mustache | 1 + .../00-atoms/15-form-fields/checkbox.mustache | 4 - .../14-form-fields/radio-field.mustache | 13 ++ .../14-form-fields/select-field.mustache | 12 ++ .../14-form-fields/validation.mustache | 4 + .../02-organisms/07-forms/form.mustache | 4 + source/css/atoms/form-field.pcss | 113 +++++++++++++++--- source/css/molecules/form-field.pcss | 19 ++- tailwind.config.js | 1 + 19 files changed, 169 insertions(+), 23 deletions(-) rename source/_patterns/00-atoms/15-form-fields/{text-input.mustache => 01-text-input.mustache} (100%) rename source/_patterns/00-atoms/15-form-fields/{disabled-text-input.mustache => 02-disabled-text-input.mustache} (100%) rename source/_patterns/00-atoms/15-form-fields/{read-only-text-input.mustache => 03-read-only-text-input.mustache} (100%) rename source/_patterns/00-atoms/15-form-fields/{text-input-addon.mustache => 04-text-input-addon.mustache} (100%) create mode 100644 source/_patterns/00-atoms/15-form-fields/05-select.mustache create mode 100644 source/_patterns/00-atoms/15-form-fields/06-disabled-select.mustache create mode 100644 source/_patterns/00-atoms/15-form-fields/07-readonly-select.mustache create mode 100644 source/_patterns/00-atoms/15-form-fields/08-checkbox.mustache create mode 100644 source/_patterns/00-atoms/15-form-fields/09-disabled-checkbox.mustache create mode 100644 source/_patterns/00-atoms/15-form-fields/10-radio.mustache create mode 100644 source/_patterns/00-atoms/15-form-fields/11-disabled-radio.mustache delete mode 100644 source/_patterns/00-atoms/15-form-fields/checkbox.mustache create mode 100644 source/_patterns/01-molecules/14-form-fields/radio-field.mustache create mode 100644 source/_patterns/01-molecules/14-form-fields/select-field.mustache diff --git a/source/_patterns/00-atoms/15-form-fields/text-input.mustache b/source/_patterns/00-atoms/15-form-fields/01-text-input.mustache similarity index 100% rename from source/_patterns/00-atoms/15-form-fields/text-input.mustache rename to source/_patterns/00-atoms/15-form-fields/01-text-input.mustache diff --git a/source/_patterns/00-atoms/15-form-fields/disabled-text-input.mustache b/source/_patterns/00-atoms/15-form-fields/02-disabled-text-input.mustache similarity index 100% rename from source/_patterns/00-atoms/15-form-fields/disabled-text-input.mustache rename to source/_patterns/00-atoms/15-form-fields/02-disabled-text-input.mustache diff --git a/source/_patterns/00-atoms/15-form-fields/read-only-text-input.mustache b/source/_patterns/00-atoms/15-form-fields/03-read-only-text-input.mustache similarity index 100% rename from source/_patterns/00-atoms/15-form-fields/read-only-text-input.mustache rename to source/_patterns/00-atoms/15-form-fields/03-read-only-text-input.mustache diff --git a/source/_patterns/00-atoms/15-form-fields/text-input-addon.mustache b/source/_patterns/00-atoms/15-form-fields/04-text-input-addon.mustache similarity index 100% rename from source/_patterns/00-atoms/15-form-fields/text-input-addon.mustache rename to source/_patterns/00-atoms/15-form-fields/04-text-input-addon.mustache diff --git a/source/_patterns/00-atoms/15-form-fields/05-select.mustache b/source/_patterns/00-atoms/15-form-fields/05-select.mustache new file mode 100644 index 0000000..6b3b929 --- /dev/null +++ b/source/_patterns/00-atoms/15-form-fields/05-select.mustache @@ -0,0 +1,8 @@ +<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> diff --git a/source/_patterns/00-atoms/15-form-fields/06-disabled-select.mustache b/source/_patterns/00-atoms/15-form-fields/06-disabled-select.mustache new file mode 100644 index 0000000..1202995 --- /dev/null +++ b/source/_patterns/00-atoms/15-form-fields/06-disabled-select.mustache @@ -0,0 +1 @@ +{{> atoms-select(disabled: true) }} diff --git a/source/_patterns/00-atoms/15-form-fields/07-readonly-select.mustache b/source/_patterns/00-atoms/15-form-fields/07-readonly-select.mustache new file mode 100644 index 0000000..b0ed964 --- /dev/null +++ b/source/_patterns/00-atoms/15-form-fields/07-readonly-select.mustache @@ -0,0 +1 @@ +{{> atoms-select(readonly: true) }} diff --git a/source/_patterns/00-atoms/15-form-fields/08-checkbox.mustache b/source/_patterns/00-atoms/15-form-fields/08-checkbox.mustache new file mode 100644 index 0000000..a7ebb21 --- /dev/null +++ b/source/_patterns/00-atoms/15-form-fields/08-checkbox.mustache @@ -0,0 +1,4 @@ +<div class="checkbox form-field__control"> + <input type="checkbox" id="checkbox_1" {{# disabled }}disabled{{/ disabled }} {{# readonly }}readonly{{/ readonly }}> + <label for="checkbox_1">{{ excerpt.short }}</label> +</div> diff --git a/source/_patterns/00-atoms/15-form-fields/09-disabled-checkbox.mustache b/source/_patterns/00-atoms/15-form-fields/09-disabled-checkbox.mustache new file mode 100644 index 0000000..35c5c35 --- /dev/null +++ b/source/_patterns/00-atoms/15-form-fields/09-disabled-checkbox.mustache @@ -0,0 +1 @@ +{{> atoms-checkbox(disabled: true) }} diff --git a/source/_patterns/00-atoms/15-form-fields/10-radio.mustache b/source/_patterns/00-atoms/15-form-fields/10-radio.mustache new file mode 100644 index 0000000..0a37088 --- /dev/null +++ b/source/_patterns/00-atoms/15-form-fields/10-radio.mustache @@ -0,0 +1,6 @@ +<div class="radio form-field__control"> + <label> + <input type="radio" name="radio" {{# disabled }}disabled{{/ disabled }}> + <span>Option</span> + </label> +</div> diff --git a/source/_patterns/00-atoms/15-form-fields/11-disabled-radio.mustache b/source/_patterns/00-atoms/15-form-fields/11-disabled-radio.mustache new file mode 100644 index 0000000..9387317 --- /dev/null +++ b/source/_patterns/00-atoms/15-form-fields/11-disabled-radio.mustache @@ -0,0 +1 @@ +{{> atoms-radio(disabled: true) }} diff --git a/source/_patterns/00-atoms/15-form-fields/checkbox.mustache b/source/_patterns/00-atoms/15-form-fields/checkbox.mustache deleted file mode 100644 index 55008b1..0000000 --- a/source/_patterns/00-atoms/15-form-fields/checkbox.mustache +++ /dev/null @@ -1,4 +0,0 @@ -<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/01-molecules/14-form-fields/radio-field.mustache b/source/_patterns/01-molecules/14-form-fields/radio-field.mustache new file mode 100644 index 0000000..a901ad3 --- /dev/null +++ b/source/_patterns/01-molecules/14-form-fields/radio-field.mustache @@ -0,0 +1,13 @@ +<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> diff --git a/source/_patterns/01-molecules/14-form-fields/select-field.mustache b/source/_patterns/01-molecules/14-form-fields/select-field.mustache new file mode 100644 index 0000000..c36e6a8 --- /dev/null +++ b/source/_patterns/01-molecules/14-form-fields/select-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-select }} + </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/validation.mustache b/source/_patterns/01-molecules/14-form-fields/validation.mustache index 09f6a82..df51667 100644 --- a/source/_patterns/01-molecules/14-form-fields/validation.mustache +++ b/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> diff --git a/source/_patterns/02-organisms/07-forms/form.mustache b/source/_patterns/02-organisms/07-forms/form.mustache index c08002a..470c360 100644 --- a/source/_patterns/02-organisms/07-forms/form.mustache +++ b/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> diff --git a/source/css/atoms/form-field.pcss b/source/css/atoms/form-field.pcss index 3c9d1f9..35ec6ce 100644 --- a/source/css/atoms/form-field.pcss +++ b/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; + } +} diff --git a/source/css/molecules/form-field.pcss b/source/css/molecules/form-field.pcss index e654257..edca451 100644 --- a/source/css/molecules/form-field.pcss +++ b/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 { diff --git a/tailwind.config.js b/tailwind.config.js index 229a268..3a3c806 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -84,6 +84,7 @@ module.exports = { 'black': '#000000', 'white': '#ffffff', 'grey': { + '25': '#fafafa', '50': '#f7f7f7', '100': '#f3f3f3', '125': '#f0f0f0', -- GitLab